Question

I’m trying to make an existing div list sortable. I’m stuck with the placeholder added by the sortable widget. If i check the demos on the web site I can see that the dragged item is moved in the list markup as I drag it around. But in my example I can only see the styled placeholder but it’s not moving between the elements. And the dragged item always snaps back to the starting point i released. Does it not work with divs as expected or what am I missing here?

<div class="dummy-deviceList">
  <div class="dummy-device ui-sortable" data-dummy-device-id="">
    <div class="dummy-device-main">
      <div class="dummy-icon dummy-icon-deviceStatus-ok"></div>
      <div class="dummy-device-descr">
        <div class="dummy-device-descr-main">FOO1</div>
        <div class="dummy-device-descr-more">BAR1</div>
      </div>
      <div class="dummy-link dummy-link-context dummy-icon dummy-icon-context"></div>
      <div class="dummy-link dummy-link-centerMap dummy-icon dummy-icon-centerMap"></div>
    </div>
  </div>

  <!-- More items here -->
</div>

Demo

http://jsfiddle.net/fuAL2/

Answer 1

I am not sure if the code in the fiddle was the original source or was the generated markup after jQueryUI had finished running on it. But you do not need to add any classes for .sortable() to work. Simply calling .sortable() on the element who’s children you wish to be sortable is enough.

So you should remove the ui-sortable class from your code and use the parent container in the selector that .sortable() is called on, for example just $(".dummy-deviceList").sortable(); not $(".dummy-deviceList .dummy-device").sortable();. However it also seems that the presence of float:left on the .dummy-device-descr causes the placeholder to not function correctly.

The placeholder float problem looks like it might be ticket#7501 (open at time of writing) with jQueryUI, however I suspect it is simply the case that floating the sortable elements is conflicting with the absolutely positioned placeholder since the elements being sorted have been floated out of normal flow.

So the changes you need to make are:

1. Remove .dummy-device-descr float:left
2. Remove ui-sortable class from class="dummy-device" elements
3. Change selector from $(".dummy-deviceList .dummy-device") to $(".dummy-deviceList")

Further to this, I will add that your code is suffering a a bit of Divitis and would certainly benefit (for the reasons in the linked article) from a little tidying up.