jQuery UI Sortable 和两个连接列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4890923/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI Sortable and two connected lists
提问by balu
I am trying to put together the following with jQuery and Sortable: There are two cases that I need to grab:
我正在尝试将以下内容与 jQuery 和 Sortable 放在一起：我需要抓住两种情况：
- A:move an item within the same list
- B:move an item from one list to another
- A：在同一个列表中移动一个项目
- B：将项目从一个列表移动到另一个列表
Case Bis solved when only using the receiveevent. But if I bind both receiveand stopthey also get fired both when moving an item from one list to another.
This makes it impossible for me to capture case Abecause I have no way of finding out if the item was moved from another list or within the same. Hope that makes sense.
仅使用事件就解决了情况B。receive但是，如果我同时绑定两者，receive并且stop在将项目从一个列表移动到另一个列表时它们也会同时被触发。这使我无法捕获案例A，因为我无法确定该项目是从另一个列表中移动还是在同一列表中移动。希望这是有道理的。
This is kind of weird because I would think of my use case as being the most used one.
这有点奇怪，因为我认为我的用例是最常用的用例。
I am craving for ideas. If you want to try it out, see http://jsfiddle.net/39ZvN/5/.
我渴望想法。如果您想尝试一下，请参阅http://jsfiddle.net/39ZvN/5/。
HTML:
HTML：
<div id="list-A">
<ul class="sortable">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
<br />
<div id="list-B">
<ul class="sortable">
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
</div>
JS:
JS：
$(function() {
$('.sortable').sortable({
stop: function(event, ui) {
// Wird auch aufgerufen wenn von Liste X nach Liste Y gezogen wird
if(!ui.sender) alert("sender null");
else alert("sender not null");
},
receive: function(event, ui) {
// Funktioniert top, damit kann ich Fall B abfangen
alert("Moved from another list");
},
connectWith: ".sortable"
}).disableSelection();
});
回答by balu
This interestingly does the job. I would have thought that cancel would move the item back to its original list, but the receive event is fired very late and stops the other events from firing. Hope this helps.This solution did not work but I was stupid enough to not see it. I removed the previous code as it is complete nonsense.
这很有趣。我原以为取消会将项目移回其原始列表，但接收事件很晚才触发并阻止其他事件触发。希望这可以帮助。这个解决方案没有用，但我愚蠢到没有看到它。我删除了以前的代码，因为它完全是胡说八道。
This is a working solution which tracks state using several events:
这是一个工作解决方案，它使用多个事件跟踪状态：
$(function() {
var oldList, newList, item;
$('.sortable').sortable({
start: function(event, ui) {
item = ui.item;
newList = oldList = ui.item.parent().parent();
},
stop: function(event, ui) {
alert("Moved " + item.text() + " from " + oldList.attr('id') + " to " + newList.attr('id'));
},
change: function(event, ui) {
if(ui.sender) newList = ui.placeholder.parent().parent();
},
connectWith: ".sortable"
}).disableSelection();
});
回答by brett
I think this is what you wanted http://jsfiddle.net/39ZvN/6/
我认为这就是你想要的 http://jsfiddle.net/39ZvN/6/
You basically have to separate the sortable commands and give each UL an id.
您基本上必须将可排序的命令分开并为每个 UL 指定一个 id。
回答by BEJGAM SHIVA PRASAD
I am also looking for same... but all above solutions not working as I want. From jquery-ui connected sortable list get serialize/toarray values of two list if item moved from one to another.
我也在寻找相同的......但以上所有解决方案都无法按我的意愿工作。如果项目从一个移动到另一个，从 jquery-ui 连接的可排序列表获取两个列表的序列化/toarray 值。
Finally I figure it out with single method which is update.
最后我用更新的单一方法解决了这个问题。
function getSortableOrder(sortableList,ui){
var listItems = {}
listItems['sortable'] = sortableList.sortable('toArray');
if(ui.sender!=null)
listItems['sender'] = ui.sender.sortable('toArray');
console.log(listItems);
}
$('.sortable[sortable="true"]').sortable({
connectWith:".sortable",
placeholder: "ui-state-highlight",
update: function(ev, ui) {
getSortableOrder($(this),ui);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="list-A">
<ul id='sort1' sortable="true" class="sortable">
<li id="1.1">item 1</li>
<li id="1.2">item 2</li>
<li id="1.3">item 3</li>
</ul>
</div>
<br />
<div id="list-B">
<ul id='sort2' sortable="true" class="sortable">
<li id="2.1">item 4</li>
<li id="2.2">item 5</li>
<li id="2.3">item 6</li>
</ul>
</div>回答by Aaron Hill
What you are trying to do IS a very common use-case. That's why there is this very simple way of accomplishing it:
您正在尝试做的是一个非常常见的用例。这就是为什么有这种非常简单的方法来完成它：
$('#list-A, #list-B').sortable({ connectWith: '.sortable' });
$('#list-A, #list-B').sortable({ connectWith: '.sortable' });
That's all there is to it.
这里的所有都是它的。
Here's a live example with explanations on the jQuery UI docs page: http://jqueryui.com/demos/sortable/#connect-lists
这是 jQuery UI 文档页面上一个带有解释的现场示例：http: //jqueryui.com/demos/sortable/#connect-lists
