JQuery Multiple Sortable List

Question

Может кто-нибудь объяснить, как взять код ниже.

Heres моментальный снимок экрана

alt text http://img196.imageshack.us/img196/9514/picture4omk.png

это мой JS

$(document).ready(function(){ 

    $(function() { 
     $("#sortable1, #sortable2").sortable(

      { connectWith: '.connectedSortable', 
      opacity: 0.6, 
      cursor: 'move', 
      update: function() { 
      var order = $(this).sortable("serialize"); 
      $.post("home/updateBOX", order, function(theResponse){ 
       $("#contentRight").html(theResponse); 
      });                
     }         
     }); 
    }); 

}); 

Это мой текущий Просмотр

<div id="contentLeft"> 
    Category 1 
    <ul id="sortable1" class="connectedSortable"> 
    <?php foreach($getcat1->result() as $box) :?> 

      <li id="recordsArray_<?php echo $box->boxID ?>"><?php echo $box->boxID . ". " . $box->boxID . $box->boxText ?></li> 
     <?php endforeach; ?> 
    </ul> 
    Category 2 
    <ul id="sortable2" class="connectedSortable"> 
    <?php foreach($getcat2->result() as $box) :?> 

     <li id="recordsArray_<?php echo $box->boxID ?>"><?php echo $box->boxID . ". " . $box->boxID . $box->boxText ?></li> 
     <?php endforeach; ?> 
    </ul> 
</div> 

Это мой текущий контроллер

function index() 
    { 

     // Boxes 
     $this->db->order_by('boxListingID','ASC');  
     $this->db->where('boxListingCat',1); 
     $data['getcat1'] = $this->db->get('boxes'); 

     $this->db->order_by('boxListingID','ASC'); 
     $this->db->where('boxListingCat',2); 
     $data['getcat2'] = $this->db->get('boxes'); 


     // Initialize 
     $this->layout->set('nav', $this->class); 
     $this->layout->load('layout','home/home_view',$data); 
    } 

    function updateBOX() 
    { 
     if (empty($_POST)) { return false; } 
     $updateRecordsArray = $_POST['recordsArray']; 
     $listingCounter = 1; 
     foreach ($updateRecordsArray as $listingCounter=>$recordIDValue) { 
      $this->db->set('boxListingID',$listingCounter+1)->where('boxID',$recordIDValue)->update('boxes'); 
     } 

    } 
} 

Пожалуйста, помогите!

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

Буду очень признателен за любую помощь.

Answer 1

Что об использовании перетаскиваемым и Droppable плагинов в jQuery UI?

Draggable plugin делает выбранные элементы перетаскиваемыми мышью.

Droppable plugin обеспечивает цель для перетаскивания.

Answer 2

Yup! Draggable и Droppable должны сделать трюк ... Вы можете использовать метод droppable для обновления состояния списка для обоих параметров: drop().

Answer 3

http://jsfiddle.net/Waw4V/2/

Если вы хотите, чтобы сделать несколько sortables, это лучше всего сделать путем присоединения классов для каждого вида списка. В приведенной выше ссылке используются div, но вы можете применить ее к спискам.

Допустим, у вас есть список вопросов:

<div id='questionList'> 
    <div class='question'> 
     <div>Question Details</div> 
     <div class='answerForQuestion'> 
      <div class='answer'>Answer 3 
       <span>Details</span> 
      </div> 
      <div class='answer'>Answer 2</div> 
      <div class='answer'>Answer 4</div> 
     </div> 
    </div> 
    <div class='question'> 
     <div>Question Details</div> 
     <div class='answerForQuestion'> 
      <div class='answer'>Answer 2</div> 
      <div class='answer'>Answer 7</div> 
      <div class='answer'>Answer 11</div> 
     </div> 
    </div> 
</div> 

Вот что вы делаете в JQuery:

$('#questionList').sortable(); // this makes one each major category sortable 
$('.answerForQuestion').sortable({ // this makes sub categories sortable 
    connectWith: ['.answerForQuestion'] 
    change: // this fires everytime the item you drag is moved, put in your logic here, such as an ajax call to update your database 
});