How to change sortable element's style while dragging?

Question

Here is my script:

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

Is it possible to change styling of dragged item in this script? For example add background : 'yellow' and it changes color and etc.?

Answer 1

you can also use jQueryUi sortable events start for this try this:-

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

When you sort an item, a class ui-sortable-helper is added to the item. You can use this class to change the appearance of the item being sorted. You can then use CSS rules to alter the appearance of this item. However, you have to ensure that your css overrides the default css of jQuery UI. For that, you may need to have very specific selectors.

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