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>

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

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

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

2 个答案: