Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Two simple methods for enabling Drag-n-Drop of SVG images from a CEP Panel to the Illustrator canvas.
/**
* What is going on here?
* The Event.dataTransfer object can be set with JavaScript. When the start of a drag event is
* detected, we capture the SVG code as a string and set it to the EventTarget.dataTransfer object
* as a string. Illustrator handles the rest.
*/
/**
* Add drag start callback. Add this method to the <img/> element like so:
*
* <img src="path/to/image.svg" onDragStart="onDragStart" />
*/
function onDragStart(event) {
var filePath = $(event.currentTarget).attr("src");
event.dataTransfer.setData(
"text/plain",
fs.readFileSync(filePath, kUTF_8)
);
return true;
}
// ******* OR ******* //
/**
* Add drag start callback below to the <svg/> element like so:
*
* <svg onDragStart="onDrageStart"><path .../></svg>
*/
function onDragStart(event) {
event.dataTransfer.setData(
"text/plain",
$(event.currentTarget).html()
);
return true;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment