如何在拖动时更改可排序元素的样式？

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可排序的事件开始为此尝试这个: -

 $( "#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");
    }
});

演示

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();