Перемещение элемента в новый сортируемый объект: как сделать ссылку на список, в который я добавляю элемент? - PullRequest
3 голосов
/ 31 октября 2011

У меня есть два сортируемых списка, связанных вместе.

У меня есть прослушиватель событий в первом списке, вызывающий функцию «A» в «sortupdate» для выполнения некоторых функций, когда я сортирую элементы в списке или получаю элементы из другого списка.

У меня также есть прослушиватель событий во втором списке, вызывающий функцию «B» в «sortreceive» для выполнения некоторых функций, когда он получил элемент из другого списка.

Моя проблема в том, что всякий раз, когда я перемещаю что-то из списка 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') { //

, которая не работает, потому что идентификатор цели остается «divMainMenu» независимо от того, куда я перехожу.

Далее я попытался проверить отправителя:

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

Однако эта информация заполнялась только после того, как она прошла этап сортировки и перешла на сортировку, поэтому снова запустил код для запуска.

/ ******* Обновленный ответом на идею Пера Кейта ниже, я ответил на это следующим кодом: При запуске меню я добавил переменную, содержащую длину оригинала.длина главного меню

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

Тогда для моего утверждения if:

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

Еще раз спасибо Кит!Я сходил с ума от этого:)

Ответы [ 3 ]

4 голосов
/ 05 ноября 2011

Хорошо, я действительно нашел другой ответ на этот вопрос.
Добавив флаг к событию start при определении сортируемого, 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); }
});

и функция, которая захватывает идентификатор перед сортировкой:

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

Теперь я могу сравнить исходный идентификатор с текущим идентификатором.

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

Великолепно, и я бы не подумал об этом без помощи Кита!

4 голосов
/ 31 октября 2011

Вы можете попытаться использовать ui.sender в соответствии с сортируемой документацией:

"ui.sender - сортируемое место, откуда поступает элемент (существует только при переходе из одного связанного списка в другой)"

Это похоже на то, что вы ищете.

1 голос
/ 01 сентября 2015

Я искал то же самое и нашел решение, которое сработало для меня здесь (все заслуги phpduck, я только нашел это)

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

$(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();

});

также есть скрипка: http://jsfiddle.net/ajberri/hEJF3/

...