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 - 可更新的排序添加类

回答

相关问题