JQuery UI Сортируемые и два связанных списка

Я пытаюсь собрать следующее с помощью jQuery и Sortable: Есть два случая, которые мне нужно захватить:

A: переместите элемент в том же списке
B: переместить элемент из одного списка в другой.

Случай B разрешается только при использовании события receive. Но если я связываю оба receive и stop, они также запускаются как при перемещении элемента из одного списка в другой. Это делает невозможным захват случая A, потому что у меня нет способа узнать, был ли элемент перемещен из другого списка или внутри него. Надеюсь, что это имеет смысл.

Это немного странно, потому что я считаю, что мой прецедент является наиболее используемым.

Я жажду идей. Если вы хотите попробовать, см. http://jsfiddle.net/39ZvN/5/.

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:

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

Ответ 1

Это интересно делает работу. Я бы подумал, что отмена перенесет элемент обратно в исходный список, но событие получения будет запущено очень поздно и остановит другие события от обстрела. Надеюсь, это поможет. Это решение не сработало, но я был настолько глуп, чтобы не видеть его. Я удалил предыдущий код, поскольку это полная глупость.

Это рабочее решение, которое отслеживает состояние, используя несколько событий:

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

http://jsfiddle.net/39ZvN/9/

Ответ 2

Я думаю, это то, что вы хотели http://jsfiddle.net/39ZvN/6/

В основном вам нужно отделить сортируемые команды и дать каждому UL идентификатор.

Ответ 3

То, что вы пытаетесь сделать, является очень распространенным случаем использования. Вот почему существует такой простой способ его достижения:

$('# list-A, # list-B'). sortable ({connectWith: '.sortable'});

Это все, что нужно.

Вот живой пример с пояснениями на странице документов jQuery UI: http://jqueryui.com/demos/sortable/#connect-lists

Ответ 4

Я тоже ищу то же самое... но все вышеперечисленные решения не работают так, как я хочу. Из отсортированного списка jquery-ui можно получить значения serialize/toarray из двух списков, если элемент перемещен из одного в другой.

Наконец, я выясню это с помощью одного метода, который является обновлением.

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>