jQuery - перетаскивание списка перетаскивания

Question

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

Я доволен всем материалом базы данных, но я борюсь с Javascript/JQuery.

У меня есть jQuery UI Sortable, работающий нормально (так что другие и переупорядочиваем элементы с помощью перетаскивания), но я не знаю, как получить новый заказ для SUBMIT.

Может ли кто-нибудь помочь? Если вам нужна дополнительная информация, просто скажите. Благодаря!

Answer 1

отправить эти данные в приложение с помощью вызова AJAX, например

$('#TabContainer').tabs(); 
$('#TabContainer .ui-tabs-nav').sortable({ 
    axis: 'x', 
    update: function(event, ui){ 
     var data = $('#TabContainer .ui-tabs-nav').sortable('serialize'); 
     $.ajax({ 
      url: '/events/update-tab-order', 
      data: data, 
      type: 'POST', 
      mode: 'abort' 
     }); 
    } 
}); 

Единственная хитрость в том, что вы должны указать идентификатор на элементе списка в формате groupname_identifier. Например:

<div id="TabContainer"> 
    <ul> 
     <li id="MyTabs_123"><a href="#tab0">Tab 1</a></li> 
     <li id="MyTabs_124"><a href="#tab1">Tab 2</a></li> 
     ...etc 
    </ul> 
    ...tab content goes here 
</div> 

Затем, когда приложение получает данные POST, то это будет массив, который выглядит следующим образом:

$_POST['MyTabs'] 

array(
    0 => '123', 
    1 => '124' 
) 

Answer 2

посмотрите @ Serialize(), я сделал то же самое, без явная кнопка отправки, но непосредственно вставляйте заказ ajax с помощью mootools.

<script language="javascript"> 
      <!-- 
      window.addEvent('domready', function() { 
       var thisSortables = new Sortables($('list'), { 
        constrain: true, 
        clone: true, 
        revert: true, 
        onStart: function() { 
         $('confirm').set('html', ''); 
        }, 
        onComplete: function() { 
         this.serialize(function(el, index) { 
          var updateOrderRequest = new Request.HTML({ 
           url: '../module/tools/admgn/dbsorter.php', 
           method: 'post', 
           data: {'itemID': el.id.replace("item_",""), 'new_pos':(index+1)} 
          }).send(); 
         }); 
         $('confirm').set('html', 'Reihenfolge erfolgreich gespeichert.'); 
        } 
       }); 
      }); 
      --> 
     </script> 

Возможно, у вас есть идея, как вы можете заставить его работать.

Answer 3

С <UL> и <OL> не образуют элемент, который вы не можете получить через метод пост, я надеюсь, что вы можете сделать с помощью этой

http://quasipartikel.at/multiselect_next/

марки все варианты, как выбраны и скрыть доступную часть как скрытые