如何在拖動時更改可排序元素的樣式？

Question

這裏是我的腳本：

<script> 
    $(function() { 
    t1 = window.performance.now() 
    var $sortable1 = $("#dragableElement").sortable({ 
     connectWith: ".connectedSortable", 
     items: ".sorting-initialize", 
     containment: "window" 

    }); 
    $sortable1.find(".ui-state-default").one("mouseenter",function(){ 
     $(this).addClass("sorting-initialize"); 
     $sortable1.sortable('refresh'); 

    }); 

    t2 = window.performance.now() 
    console.log(t2-t1) 
    }); 
    </script> 

是否有可能改變拖動項目的風格在這個腳本？例如添加背景：「黃色」，它會改變顏色等。

Answer 1

你也可以使用jQueryUI的排序事件start這個試試這個： -

$("#dragableElement").sortable({ 
    connectWith: ".connectedSortable", 
    items: ".sorting-initialize", 
    containment: "window", 
    start: function(event, ui) { 
     $(ui.item).addClass("yellow"); 
    }, 
    stop:function(event, ui) { 
     $(ui.item).removeClass("yellow"); 
    } 
}); 

Demo

Answer 2

當您對物品進行排序時，類ui-sortable-helper被添加到物品。您可以使用此類來更改正在排序的項目的外觀。然後，您可以使用CSS規則來更改此項目的外觀。但是，您必須確保您的css覆蓋jQuery UI的默認css。爲此，您可能需要有非常具體的選擇器。

演示：http://jsfiddle.net/UAcC7/1503/

CSS：

.ui-sortable-helper { 
    background:green; 
} 

HTML：

<div class="demo"> 
     <ul id="sortable"> 
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> 
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> 
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> 
     </ul> 
    </div> 
    <!-- End demo --> 
    <div class="demo-description" style="display: none; "> 
     <p>Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share <code>draggable</code> properties.</p> 
    </div> 
    <!-- End demo-description --> 

JS：

$("#sortable").sortable();