Last active
October 16, 2023 07:28
-
-
Save iconifyit/dbed2ac01cbf4c7233c8a94d13e21c4a to your computer and use it in GitHub Desktop.
Two simple methods for enabling Drag-n-Drop of SVG images from a CEP Panel to the Illustrator canvas.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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