Jquery mehrere sortierbare Liste

Question

Kann jemand bitte erklären, wie man den Code unten nimmt.

Heres ein Screenshot

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

dies mein JS ist

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

}); 

Dies ist meine aktuelle Ansicht ist

<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> 

Dies ist meine aktuelle Controller-

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'); 
     } 

    } 
} 

Bitte Hilfe!

Ich habe mich sehr bemüht, den folgenden Code funktionieren zu lassen, so dass beim Ziehen eines li von einem UL zum anderen erkannt wird, dass es in einem neuen UL ist, und diese Daten speichern. Ich weiß nicht, wo ich anfangen soll

Ich werde sehr sehr dankbar für jede Hilfe sein.

Answer 1

Was ist mit dem ziehbar und abwerfbaren Plugins in jQuery UI?

Die macht ausgewählte Elemente mit der Maus ziehbar.

Die Droppable plugin bietet ein Drop-Ziel für ziehbare Objekte.

Answer 2

Yup! Draggable und Droppable sollten den Trick machen ... Sie können die drop() Methode von Droppable verwenden, um den Listenstatus für beide zu aktualisieren.

Answer 3

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

Wenn Sie suchen mehrere sortables zu machen, ist es am besten durch das Anbringen Klassen für jede Art von Liste. Der obige Link verwendet divs, aber Sie können es auf Listen anwenden.

Nehmen wir Ihnen eine Liste von Fragen:

<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> 

Hier ist, was Sie in jQuery tun:

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