jQuery-ui。使用“可拖动”,“分类”和“标签”在一起麻烦
-
26-10-2019 - |
题
我从这个工作的拖放示例开始 这里.
但是,当我尝试将下降区域放置在选项卡中时,它效果很好(这里)似乎打破了。当我尝试将项目放在“可排序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();
解决方案
JQuery 1.4和/或JQuery-UI 1.8看起来有些不对劲。如果您玩这个:
使用jQuery 1.4.4和UI 1.8.7,您会看到与您看到的相同奇怪的行为(即,在切换选项卡之后必须与可排序交互,然后才能再次拖动'Drop)。但是,如果您切换到jQuery 1.7.1和UI 1.8.16:
一切似乎都很好。因此,升级了问题。
我还将可拖动切换到 <div>
为了避免产生无效的HTML,但这不会影响奇怪的行为。我也取代了你 id="draggable"
和 class="draggable"
再次,避免使用无效的HTML,但这也不会影响越野车行为。
不隶属于 StackOverflow