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

【问题标题】：How to change sortable element's style while dragging?如何在拖动时更改可排序元素的样式？
【发布时间】：2015-09-21 02:42:19
【问题描述】：

这是我的脚本：

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

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

【问题讨论】：

标签： javascript jquery css jquery-ui jquery-ui-sortable

【解决方案1】：

当您对项目进行排序时，会向该项目添加一个类 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();

【讨论】：

【解决方案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

【讨论】：

当我将这些启动和停止功能添加到我的代码中时，拖放功能就消失了。知道为什么吗？当我评论这些行时，一切都很好。
并确保, 在containment: "window" 之后应该是containment: "window",
是的，我在“窗口”之后错过了“，”，但是，当我使用拖放时，无论选择哪种颜色，样式都不会改变。
你是否在 css 中添加了 yellow 类？
.yellow { background:yellow; }