Ghost is broken when using handle.

[lukasoppermann]

Ghost is broken when using handle.

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