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

【问题标题】：change class name when dragged and dropped and vice versa - jqueryUI拖放时更改类名，反之亦然 - jqueryUI
【发布时间】：2012-07-02 13:17:38
【问题描述】：

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

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

【问题讨论】：

标签： jquery jquery-ui

【解决方案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/

【讨论】：

或者简单地说：$(ui.item).switchClass('sortedli', 'droppedli');

【解决方案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上创建了一个带有解决方案的垃圾箱

【讨论】：