拖放时更改类名称，反之亦然-jqueryUI [英] change class name when dragged and dropped and vice versa - jqueryUI

问题描述

我正在使用jqueryUI将列表项从一个列表拖放到另一个可排序列表.无论如何，当我将其从all-colls-list放入可排序列表coll-selected-list时，我可以将其从"sortedli"更改为"droppedli"吗?目前，当我放下它时，它保留了原来的类名.

I'm using jqueryUI to drag/drop list items from one list to another sortable list. Is there anyway I can change the class of the dropped item from 'sortedli' to 'droppedli' when it is dropped from all-colls-list into the sortable list coll-selected-list and vice versa? Currently when I drop it, it retains the original class name.

$(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 UI发生拖放事件时更改类的完整解决方案.

Here is complete solution for changing class when on drag and drop events occurred using 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脚本文件的完整或最小版本.

Note: Please note that before run above script, we have to include either full or min versions of latest jquery.js and latest jQuery UI java script files.

我在 http://codebins.com/codes/home/4ldqpc3上创建了带有解决方案的垃圾箱

这篇关于拖放时更改类名称，反之亦然-jqueryUI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！