Jquery UI - 可更新的排序添加類

我正在使用jQuery UI排序插件與2個連接列表。我試圖在將某個類放入特定的uls時將其添加到li中。因此，根據ul的情況，我希望它刪除舊的類，並添加一個新的不同的類，它將依賴於ul。例如：我有一個完整的列表和一個存檔列表。我希望它在從完成到歸檔的過程中改變類，反之亦然。我做了一些研究，發現：Jquery UI - 可更新的排序添加類

receive: function(event, ui) { //Element ready to be dropped to new place 
    source_element = $(ui.item); // here is your selected item 
    }

我想這給了我剛搬來的項目，但我不知道如何使它知道哪個UL它在當下，它是從哪裏來的。任何幫助將是偉大的，謝謝！

來源

2009-09-22 ShortRound1911

下面列出的代碼應該做你想做的。我借用了jquery網站的HTML佈局，然後添加了所需的功能。有幾個步驟可以使它工作。

我使用connectWith選項連接了兩列。
我添加了代碼，用於偵聽sortreceive()，只有當li從一列移動到另一列時纔會觸發該代碼。我設置了一個變量，以便我知道sortstop()何時會觸發我是否在新列中。
然後，根據li來自哪一列，我刪除原始類並添加新列的類。

 <style type="text/css"> 
    #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; } 
    #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } 

    .ui-state-default { background-color: #ccc;} 
    .ui-state-highlight { background-color: #fff;} 
    </style> 
    <script type="text/javascript"> 
    var list; 
    $(function() { 

      $('#sortable1').sortable({ 
        connectWith: '#sortable2' 
      }).disableSelection(); 
      $('#sortable2').sortable({ 
        connectWith: '#sortable1' 
      }).disableSelection(); 

      $('#sortable1').bind('sortreceive', function(event, ui) { 
       list = "different";   
      }); 

      $('#sortable2').bind('sortreceive', function(event, ui) { 
       list = "different";   
      }); 

      $('#sortable2').bind('sortchange', function(event, ui) { 
       list = "same"; 
      }); 

      $('#sortable1').bind('sortchange', function(event, ui) { 
       list = "same"; 
      }); 

      $('#sortable1').bind('sortstop', function(event, ui) { 
       if(list == "different") { 
        $('#'+ui.item[0].id).removeClass("ui-state-default"); 
        $('#'+ui.item[0].id).addClass("ui-state-highlight"); 
       } 
       list = ""; 
      }); 
      $('#sortable2').bind('sortstop', function(event, ui) { 
       if(list == "different") { 
        $('#'+ui.item[0].id).removeClass("ui-state-highlight"); 
        $('#'+ui.item[0].id).addClass("ui-state-default"); 
       } 
       list = ""; 
      }); 

    }); 

    </script> 


    <div class="demo"> 

    <ul id="sortable1" class="connectedSortable"> 
     <li id="li1" class="ui-state-default">Item 1</li> 
     <li id="li2" class="ui-state-default">Item 2</li> 
     <li id="li3" class="ui-state-default">Item 3</li> 
     <li id="li4" class="ui-state-default">Item 4</li> 
     <li id="li5" class="ui-state-default">Item 5</li> 
    </ul> 

    <ul id="sortable2" class="connectedSortable"> 
     <li id="li6" class="ui-state-highlight">Item 6</li> 
     <li id="li7" class="ui-state-highlight">Item 7</li> 
     <li id="li8" class="ui-state-highlight">Item 8</li> 
     <li id="li9" class="ui-state-highlight">Item 9</li> 
     <li id="li10" class="ui-state-highlight">Item 10</li> 
    </ul> 

    </div>

來源

2009-12-18 22:21:50

但它已經有使用event.target！

$('#sortable1').sortable({connectWith: '#sortable2,#sortable3'}).disableSelection(); 
$("#sortable2,#sortable3").bind("sortreceive",function(event,ui){ 
     // current item list (event.target) 
     // source item list (ui.sender) 
})

注意：您可以通過使用螢火蟲用的console.log（事件）和執行console.log（UI），節省了大量的時間;）

來源

2011-08-04 11:14:52

Jquery UI - 可更新的排序添加類

回答

相關問題