使用jquery ui sortable和tabs(想要在标签周围移动项目)苦苦挣扎 [英] Struggling with jquery ui sortable and tabs (would like to move items around tabs)
问题描述
有关此主题的文档非常明确: http://jqueryui.com/sortable / #connect-lists-through-tabs
Documentation on this subject was quite clear: http://jqueryui.com/sortable/#connect-lists-through-tabs
我试图在我的项目中做同样的事情,但是我无法将元素从1个标签移动到其他。有时没有任何事情发生,有时项目从当前列表中消失(显示:无),没有别的...
I tried to do the same in my project, but I cannot get element to move from 1 tab to the other. Sometimes nothing happens, and sometimes item disappears from current list (display:none) and nothing else...
我把jsfiddle放在一起演示我看到的内容。
I put together jsfiddle to demonstrate what I see.
也许我看不出我犯的小错误:S
Maybe I just cannot see the little mistake I made :S
$(".word-list").sortable({
tolerance: 'pointer',
cursor: 'move',
forcePlaceholderSize: true,
dropOnEmpty: true,
connectWith: 'ol.word-list',
placeholder: "ui-state-highlight"
}).disableSelection();
// Words tabs
var $tabs = $("#tabs").tabs();
// Make tab names dropable
var $tab_items = $("#tabs-nav li", $tabs).droppable({
accept: ".word-list li",
hoverClass: "ui-state-hover",
tolerance: 'pointer',
drop: function (event, ui) {
var $item = $(this);
var $list = $($item.find("a").attr("href")).find(".word-list");
ui.draggable.hide("fast", function () {
$tabs.tabs("option", "active", $tab_items.index($item));
$(this).appendTo($list).show("slow");
});
}
});
添加容差:指针在单调和拖放区域固定不一致。但一般问题仍然存在。
Adding tolerance:pointer fixed inconsistency on drab and drop area. But general problem remains.
推荐答案
我已经从 JQuery Sortable documentation 。试试下面的HTML。
I have copied the recommending HTML from the JQuery Sortable documentation. Try the below HTML.
我将所有标签包装在ID为'tabs'的DIV中,所有'word-list'类现在都包含在带有不同标签的DIV中ID的。我还将所有< ol>
元素更改为< ul>
。
I wrapped all tabs in a DIV with the id 'tabs' and all your 'word-list' classes are now wrapped in DIV's with different tab ID's. I also changed all <ol>
elements to <ul>
.
<section class="userview-right" id="tabs">
<h1>Words</h1>
<div id="tabs">
<ul id="tabs-nav">
<li><a href="#tabs-1">list 1</a></li>
<li><a href="#tabs-2">list 2</a></li>
<li><a href="#tabs-3">Deleted</a></li>
</ul>
<div id="tabs-1">
<ul class="word-list">
<li class="ui-state-default">
list 1
</li>
</ul>
</div>
<div id="tabs-2">
<ul class="word-list">
<li class="ui-state-default">
list 2
</li>
</ul>
</div>
<div id="tabs-3">
<ul class="word-list">
<li class="ui-state-default">
deleted
</li>
</ul>
</div>
</div>
</section>
这是 JsFiddle 。
这篇关于使用jquery ui sortable和tabs(想要在标签周围移动项目)苦苦挣扎的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!