Question

我有两个链接在一起的可排序列表。

我在第一个列表上有一个事件监听器，在“sortupdate”上调用函数“A”，以便在我对列表中的项目进行排序或从其他列表接收项目时执行某些功能。

我还在第二个列表上有一个事件监听器，在“sortreceive”上调用函数“B”，以便在收到另一个列表中的项目时执行某些功能。

我的问题是每当我从列表1移动到列表2时，也会调用函数“A”，从而导致代码出错。我想在函数“A”的开头添加一个'if'子句，说只有当第一个列表是目标时运行此代码，但我不能在我的生活中找出如何引用目标。

或许有更好的方法来检查某个项目是否被拖出此列表？

/ *添加当前代码* /

$("#divMainMenu").bind("sortupdate", function(event, ui) 
    { dropRootCategory(event,ui);})//when the main menu receives a menu item
$("ul.divSubMenu ").bind("sortreceive", function(event, ui) 
    { dropSubMenu(event, ui);})//when the main submenu receives a menu item
function dropRootCategory(event, ui) 
{/*item dropped on root category*/
//do some different stuff
}
function dropSubCategory(event, ui) 
{//item dropped on a sub submenu
//do some stuff
}

我试过检查目标：

if (event.target.id == 'divMainMenu') { //

这不起作用，因为无论我去哪里，目标ID都会保持'divMainMenu'。

接下来我尝试检查发件人：

if (ui.sender == 'null'){//

但是，只有在通过sortupdate阶段并进入sortreceive之后才会填充任何信息，因此它再次触发了代码运行。

/ * ** * ** *更新了答案 Per Keith的想法如下，我用以下代码回答了这个问题：在启动菜单时，我添加了一个变量，其中包含主菜单原始长度的长度

var numMenuItems = $('#divMainMenu').children().length;

然后是我的if语句：

if ($('#divMainMenu').children().length >= numMenuItems){
//do some stuff
}

再次感谢基思！我在这个问题上疯了：）

Answer 1

您可以根据可排序文档尝试使用ui.sender：

“ui.sender - 项目来源的可排序（仅当您从一个连接列表移动到另一个连接列表时才存在）”

这看起来就像你要找的那样。

Answer 2

好的，我确实找到了另一个答案通过在定义可排序时向开始事件添加标志，AS WELL AS是对stop事件的函数调用：

$('ul.divSortable').sortable({
    items: "li:not(.liEdit)", //cancel: ".liEdit",
    connectWith: '.divSortable',
    start: function(event, ui) { setOriginalSub(ui); },        
    stop: function(event, ui) { isBeingSorted = false; sortSorter(event, ui); }
});

和一个在排序之前抓取id的函数：

function setOriginalSub(ui) 
{
    originalSub = $(ui.item[0]).parent().attr('id');
}

我现在可以将原始ID与当前ID进行比较。

function sortSorter(event, ui){
    var parentID = $(ui.item[0]).parent().attr('id');
}

很棒，如果没有基思的帮助我也不会想到它！

Answer 3

我一直在寻找相同的东西，并找到了适合我的解决方案（全部归功于phpduck，我只发现了这个）

http://phpduck.com/jquery-ui-sortable-drag-items-between-two-lists/

＆＃13;

$(function () {
    var oldList, newList, item;
    $(".categories-sortable").sortable({
        connectWith: $('.categories-sortable'),
        start: function (event, ui) {
            item = ui.item;
            newList = oldList = ui.item.parent();
        },
        stop: function (event, ui) {
            console.log("Moved " + item.text() + " from " + oldList.attr('id') + " to " + newList.attr('id'));
        },
        change: function (event, ui) {
            console.log(ui.sender);
            
            if (ui.sender) {
                newList = ui.placeholder.parent();
            }
        },
    })
        .disableSelection();

});

＆＃13;

另外，还有一个小提琴：http://jsfiddle.net/ajberri/hEJF3/

将项目移动到新的sortable：如何引用列表我正在删除元素？

3 个答案: