jQueryUI Drag & Drop списки - в обе стороны? - PullRequest
Новая
       7

jQueryUI Drag & Drop списки - в обе стороны?

0 голосов
/ 05 октября 2011

Я просматривал документацию jQueryUI Draggable и Droppable.Я нашел различные способы сделать перетаскивание списка в другой список, но не ОБА?

Мой сценарий состоит в том, что у меня есть 2 списка: 

<div id='attached'>
  <ul>
    <li id='12'>An item</li>
    <li id='48'>An item</li>
    <li id='183'>An item</li>
  </ul>
</div>

<div id='non-attached'>
  <ul>
    <li id='36'>An item</li>
    <li id='873'>An item</li>
    <li id='1639'>An item</li>
  </ul>
</div>

Если один выпадетДля элемента из списка 1 в список 2 должен быть выполнен URL AJAX - например,

hello.asp?action=add&id=48

И если один выбрасывает элемент из списка 2 в список 1, другойURL AJAX должен быть выполнен - ​​как

hello.asp?action=remove&id=48

Возможно ли это каким-либо образом?:) Это сделало бы интерфейс моего скрипта ОЧЕНЬ проще:)

Примечание: Я уже знаком с jQueryUI, но и drop-drop, и draggable-новы для меня.По крайней мере до сих пор:)

РЕДАКТИРОВАНИЕ: 

<ul id='attached'>
  <li id='itemID_12'>An item</li>
  <li id='itemID_48'>An item</li>
  <li id='itemID_183'>An item</li>
</ul>

<ul id='non-attached'>
  <li id='itemID_36'>An item</li>
  <li id='itemID_873'>An item</li>
  <li id='itemID_1639'>An item</li>
</ul>

$(function() {
  $('#attached').sortable({ dropOnEmpty: true, items: 'li:not(.ui-state-disabled)', cursor: 'pointer', update: function(event, ui) { }, connectWith: '#non-attached' }).disableSelection();
  $('#non-attached').sortable({ dropOnEmpty: true, items: 'li:not(.ui-state-disabled)', cursor: 'pointer', update: function(event, ui) { }, connectWith: '#attached' }).disableSelection();
};

Теперь мне нужно только получить правильные сериализованные данные через AJAX через обновление: {}?

РЕДАКТИРОВАНИЕ:

ПОЛУЧИЛ ЭТО! 

var order = $('#attached').sortable('serialize',{key:'string'});
$.ajax({
  type: 'POST', 
  cache: false, 
  contentType: 'application/x-www-form-urlencoded; charset=UTF-8', 
  url: 'functions.asp?a=helloworld', 
  data: order 
});

теперь, когда я запрашиваю ("строка") в functions.asp я получаю сериюиз идентификаторов, как "25, 28, 31, 94, 95" ..:)

1 Ответ

1 голос
/ 05 октября 2011

Я сделал нечто подобное, хотя с использованием сортируемых таблиц (порядок был важен в моем приложении) сортируемые таблицы основаны на перетаскиваемых объектах.В настоящее время наша сеть испытывает проблемы с доступом к jqueryui.com, поэтому я не могу дать вам именно то, что вы хотите, но я дам вам кое-что на основе моей, что должно дать вам хорошее начало. 

$(function() {
    $("#attached").sortable({
        update: function(event, ui) {
            FunctionToCheckAddtionAndCallAjax();
        },
        connectWith: '#non-attached'
    });

    $("#non-attached").sortable({
        update: function(event, ui) {
            FunctionToCheckRemovalAndCallAjax();
        },
        connectWith: '#attached'
    });
});

Какэто основано на сортируемых, а не перетаскиваемых объектах. Я отправил проверку и ajax на вызов функции, а не на анонимную функцию. Эти функции должны проверить, было ли обновление добавлением / удалением или просто переупорядочением, и условно сделать вашАякс звонит.Могут быть обработчики событий, когда элементы добавляются / удаляются, но без доступа к сайту я не могу проверить документацию.

...