how to drag and drop from webview to sketch?

iyhb329

hi all,

i'm building a sketch plugin, allowing draging preview images from symbols to sketch. the preview images list in webview using the <img> tag. now, drag on the <img> tag and drop into the sketch works well.

but sometimes,the preview image could be very small, so drag on the small image is not a good idea. so i make the <div> element, which is the parent of <img>, draggable to expand the draggable area. but when dragging the <div> to sketch, sketch could not recognize the symbol. it looks like sketch only accepts image that dragging to it.

does anyone have any ideas how to make dragging div to sketch is acceptable?

code like this
<div draggable={true} onDragEnd={this.insertSymbol} > <img src={pngUrl} /> </div>

sorry for my poor english

iyhb329

@kevgski

kevgski

Sorry I don't think it's easily done in Javascript. The best I can offer is to check out the cocoa documentation for more info https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/DragandDrop/DragandDrop.html#//apple_ref/doc/uid/10000069-SW1

The underlying Sketch app code doesn't know what to do with the div. Its probably just a string. It probably has some method implemented to understand images which is why it seemed to work earlier? I'm not entirely sure.

kevgski

This is going to sound strange... but could you have two images?

<img src={transparentImage} />
<img src={pngUrl} />

That way you are always dragging an image?

tianyu

I met the same problem, how did you solve it