1

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>
4

2 に答える 2

2 
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/

于 2012-07-02T13:26:40.237 に答える
1

これは、jQueryUIを使用してドラッグアンドドロップイベントが発生したときにクラスを変更するための完全なソリューションです。

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および最新のjQueryUIjavaスクリプトファイルのフルバージョンまたは最小バージョンを含める必要があることに注意してください。

http://codebins.com/codes/home/4ldqpc3でソリューションを使用してビンを作成しました

于 2012-07-03T08:17:43.153 に答える