jQuery UI Сортируемый и два связанных списка - PullRequest
Новая
       24

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

14 голосов
/ 03 февраля 2011

Я пытаюсь соединить следующее с 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();
});

Ответы [ 4 ]

31 голосов
/ 04 февраля 2011

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

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

$(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/

3 голосов
/ 03 февраля 2011

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

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

2 голосов
/ 28 декабря 2016

Я тоже ищу то же самое ... но все вышеперечисленные решения работают не так, как я хочу. Из связанного сортируемого списка, связанного с jquery-ui, можно получить значения сериализации / 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>
1 голос
/ 19 сентября 2012

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

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

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

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

...