Jquery-ui。同时使用"draggable“、"sortable”和"tabs“时遇到麻烦
Jquery-ui。同时使用"draggable“、"sortable”和"tabs“时遇到麻烦
提问于 2012-01-11 02:06:23
我是从这个拖放示例here开始的。
它工作得很好，但是当我尝试将拖放区域放在选项卡(Here)中时，它似乎会断掉。当我试图将一个项目放到“可排序的2”标签上时，它停止工作。
希望这是有意义的。
HTML如下所示：
<ul>
<li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Sortable 1</a></li>
<li><a href="#tabs-2">Sortable 2</a></li>
</ul>
<div id="tabs-1">
<div class="ui-state-default">Item 13</div>
<div class="ui-state-default">Item 23</div>
<div class="ui-state-default">Item 3</div>
<div class="ui-state-default">Item 4</div>
</div>
<div id="tabs-2">
<div class="ui-state-default">Item 1</div>
<div class="ui-state-default">Item 2</div>
<div class="ui-state-default">Item 3</div>
<div class="ui-state-default">Item 4</div>
</div>
</div>和JavaScript：
$("#tabs").tabs();
$("#tabs-1, #tabs-2").sortable({
revert: true
});
$("#draggable").draggable({
connectToSortable: '#tabs-1, #tabs-2',
helper: 'clone',
revert: 'invalid'
});
$("ul, li").disableSelection();回答 1
Stack Overflow用户
回答已采纳
发布于 2012-01-11 19:23:34
看起来jQuery 1.4和/或jQuery-UI1.8有问题。如果你玩这个：
http://jsfiddle.net/ambiguous/jjmVt/
它使用jQuery 1.4.4和UI 1.8.7，您将看到与您看到的相同的奇怪行为(即在切换选项卡后必须与可排序对象交互，然后才能再次拖放)。但是如果您切换到jQuery 1.7.1和UI 1.8.16：
http://jsfiddle.net/ambiguous/NRZ2U/
一切似乎都很正常。所以升级你的方法来解决这个问题。
我还将可拖动对象切换为<div>，以避免产生无效的HTML值，但这并不会影响奇怪的行为。我也用class="draggable"替换了你的id="draggable"，以避免无效的超文本标记语言，但这也不会影响错误行为。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8808178
复制相关文章
相似问题
腾讯云开发者
