Question

我正在使用jqueryUI将列表项从一个列表拖放到另一个可排序列表。无论如何我可以将被删除项目的类从'sortedli'更改为'droppedli'，当它从all-colls-list删除到可排序列表coll-selected-list时，反之亦然？目前，当我删除它时，它会保留原始的类名。

$(function() {
    var lists = [{"listid":"#all-colls-list", "connectid":"#coll-selected-list", "drop":true},
     {"listid":"#coll-selected-list", "connectid":"#all-colls-list", "drop":true}];

    $.each(lists, function(i, list) {
        $(list.listid).sortable({
            connectWith: list.connectid,
            dropOnEmpty: list.drop
        });
    });
});

<ul id="all-colls-list" class="droptrue ui-sortable">
                <li class="sortedli">ahsbah</li>
                <li class="sortedli">bachs</li>
                <li class="sortedli">stah</li>
</ul>


<ul id="coll-selected-list" class="droptrue ui-sortable">
              <li class="sortedli" style="">blah</li>
              <li class="sortedli" style="">blah</li>
              <li class="sortedli" style="">blah</li>
</ul>

Answer 1

stop: function(event, ui) {
    if ($(ui.item).parents('#all-colls-list').length > 0) {
        $(ui.item).removeClass('droppedli').addClass('sortedli');
    } else {
        $(ui.item).removeClass('sortedli').addClass('droppedli');
    }
}

示例 - http://jsfiddle.net/s6XTu/9/

Answer 2

这是使用jQuery UI进行拖放事件时更改类的完整解决方案。

HTML：

<ul id="all-colls-list" class="droptrue ui-sortable">
  <li class="sortedli">
      ahsbah
  </li>
  <li class="sortedli">
      bachs
  </li>
  <li class="sortedli">
      stah
  </li>
</ul>

<ul id="coll-selected-list" class="droptrue ui-sortable">
  <li class="sortedli" style="">
      blah
  </li>
  <li class="sortedli" style=""> 
      blah
  </li>
  <li class="sortedli" style="">
      blah
  </li>
</ul>

CSS：

#all-colls-list{
   display:inline-block;
   width:200px;
   border:1px solid #331299;
   background-color:#1177a8;
   height:auto;
}

#coll-selected-list{
   display:inline-block;
   width:200px;
   border:1px solid #331299;
   background-color:#a14466;
   height:auto;
}
#all-colls-list li, #coll-selected-list li{
   list-style:none;
}
#all-colls-list li:hover, #coll-selected-list li:hover{
   cursor:move;
   border:2px solid #A1B177;
}

.dropped{
   background-color:#2277a7;
}
.sorted{
   background-color:#a74455;
}

JQuery的：

var lists = [{
              "listid": "#all-colls-list",
              "connectid": "#coll-selected-list"
            }, {
              "listid": "#coll-selected-list",
              "connectid": "#all-colls-list"
           }];
  //Apply Sort on each list
  $.each(lists, function(i, list) {
          $(list.listid).sortable({
             connectWith: list.connectid,
             opacity: 0.7,
             start: function(event, ui) {
                 if ($(ui.item).parents('#all-colls-list').length > 0) {
                      $(ui.item).addClass('dropped');
                 } else {
                      $(ui.item).addClass('sorted');
                 }
             },
            stop: function(event, ui) {
               if ($(ui.item).parents('#all-colls-list').length > 0) {
                    $(ui.item).switchClass('droppedli', 'sortedli');
               } else {
                    $(ui.item).switchClass('sortedli', 'droppedli');
               }
               $(ui.item).removeClass('sorted');
               $(ui.item).removeClass('dropped');
            }
       });

 });

注意：请注意，在运行上面的脚本之前，我们必须包含最新的jquery.js的完整或最小版本以及最新的jQuery UI java脚本文件。

我使用http://codebins.com/codes/home/4ldqpc3

上的解决方案创建了一个bin

拖放时更改类名，反之亦然 - jqueryUI

2 个答案: