Needs offset for drag image when using dnd-handle

[thenetsmith]

When using a child element as dnd-handle, the LI drag image is created with an offset of (0, 0), resulting in the upper-left corner of the drag image being positioned under the current location of the cursor. This is not a big deal if the drag handle appears on the LHS of the LI to be dragged (as in the "Item Types" demo). However, if the drag handle is positioned on the RHS of a LI that is wide and short, the left edge of the drag image will appear under the cursor with the rest of the drag image out to the right. This can result in much of the drag image being out of view of the client area, causing the user to want to drag left, left, left, until the drag image is entirely visible.

The attached image illustrates this point. The dnd-handle element has a red circle around it. A drag operation was just begun using one of the handles, and the drag image is mostly non-visible to the right.

I have modified (locally) the function that executes when the dragstart event is fired (in the dndDraggable directive), passing the mouse coordinates relative to the LI origin to event.dataTransfer.setDragImage, and it works well in my scenario -- closely approximating the same visual behavior I have observed when dragging the LI without a dnd-handle.

I would like to submit a pull request to share these changes.

[zlovin]

Quick, easy, and succinct fix.
@marceljuenemann Could this get merged soon?

[PapyElGringo]

I installed this library 10 minutes ago and I was already looking for this !

Why it's not already merged?

[jpuffer]

Please merge this!

[Stalinko]

I had similar problem but my html looked like this:

<li dnd-draggable>
    <div style="position: absolute; top: 5px; right: 5px;">
        <a dnd-handle>Drag me</a>
    </div>
</li>

The key thing is that the handler doesn't lay directly inside dnd-draggable, but inside another div which is absolutely positioned. The fix mentioned above doesn't work properly in such situations, but it gave me idea how to write an universal fix for all cases. See my comment under the pull request: #245 (comment)

[peteallen]

Is there a reason this hasn't been merged yet? Is there anything I can do to help?