Ghost is broken when using handle.

[lukasoppermann]

When using a handle only the handle item is used as a ghost while it should be the whole item.

You can test it here http://htmlpreview.github.io/?https://github.com/voidberg/html5sortable/blob/master/examples/examples.html

[lukasoppermann]

I am working on this, I have it fixed, it just needs some cleaning up and docs.

[scien]

any update here?

[lukasoppermann]

Fix is added, just waiting for a merge of #77.

[rutger1140]

Bumped into this as well. My workaround was to remove the handle option in the JS, but leave it in the HTML. The ghosts behaves like it should.

Even though it is possible to drag the entire item, my user tests showed most people use the drag handle icon I created anyway.

[knitevision1]

@lekkerduidelijk what do you mean by that? Could you expand please?

[rutger1140]

@knitevision1 Sure. So my code was something like:

// Create sortable list
var $sortlist = $("[data-sortable='true']");
$sortlist.sortable({ handle: ".handle" });

<ul data-sortable="true">
  <li data-item-id="1"><span class="handle"></span> Item 1</li>
  <li data-item-id="2"><span class="handle"></span> Item 2</li>
</ul>

I removed the handle option, so the entire element is draggable. The HTML remains the same.

$sortlist.sortable();

Just don't use the handle in Javascript, only in HTML.