setDragImage doesnt work

[steffanhalv]

Same issue as

SortableJS/Sortable#146

Example

https://kryogenix.org/code/browser/custom-drag-image.html

Step by step scenario

Actual Solution

Expected Solution

This should work

<draggable
          v-model="items"
          @start="modify"...

modify (e) {
        let dragIcon = document.createElement('img')
        dragIcon.src = 'https://www.google.no/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'
        e.dataTransfer.setDragImage(dragIcon, 0, 0)
      }

[steffanhalv]

Sorry, it can be done with setData method ^^

Accepted types:

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types

Example:

<draggable :options="{setData: modifyDragItem}"></draggable>

modifyDragItem (dataTransfer) {
        let img = new Image()
        img.src = 'https://www.google.no/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'
        dataTransfer.setDragImage(img, 0, 0)
      }

[edgarsn]

To achieve this in v2.20 or higher where options prop is deprecated, use setData directly, like:

<draggable :setData="modifyDragItem"></draggable>

JS part remains the same.

[narraressan]

<draggable 
    v-model="actionClones"
    :setData="customDragEl"
    :group="groupName" 
    handle=".move-handle" 
    @start="startDrag" 
    @end="endDrag">
</draggable>

when I used this method, the draggable crashes after customDragEl and endDrag didn't get executed.

Edit: my workaround was to change the dragImage on @dragStart on each draggable item

<draggable v-model="items" :group="groupName" handle=".move-handle" @end="endDrag">
    <div
        v-for="nth in items"
        :key="nth.id"
        :item_id="nth.id"
        @dragstart="rewriteDragImg(nth, $event)"
      >
    ...
</draggable>
<script>
...
    rewriteDragImg(item, event) {
      event.dataTransfer.setDragImage(event.originalTarget, 200, 0);
    },
...
</script>

[nicholaswright]

@steffanhalv Your solution doesn't work for me in Chrome because the first time you drag it shows a broken image link. The trick is to create the image beforehand.

created() {
    let img = new Image()
    img.src = 'https://www.google.no/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'
    this.dragImg = img
}

and then in modifyDragItem just apply the image with dataTransfer.setDragImage(this.dragImg, 0, 0)

[heyakyra]

Does this still work? The setData prop is undocumented (and doesn't follow normal vue prop naming conventions) and doesn't seem to get called when dragging.