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

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>

是否可以在此脚本中更改拖动项的样式？例如添加背景：'yellow' 它会改变颜色等？

Answer 1

当您对项目进行排序时，class ui-sortable-helper 会添加到该项目。您可以使用此 class 更改正在排序的项目的外观。然后您可以使用 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();

Answer 2

您也可以使用 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

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

How to change sortable element's style while dragging?

javascript

css

jquery

jquery-ui

jquery-ui-sortable