Drag and Drop images/layers from HTML to AI documens (Illustrator)

[Avenser]

Hello every body!

I want to share my idea of images Drag and Drop realisation without C++ plugin.

Git:

GitHub - KupinFB/Adobe-HTML-Extension-Drag-and-Drop: Adobe HTML Extension - Drag and Drop example

How you can drag something (example):

In Illustrator we can drag only text from an HTML Panel to AI Documents.

For it we have to add attribute draggable="true" to our html tag.
And after it, we will be able to drag our html tag to active document.

Html:

<div class="color" style="background-color:#55AAFF" draggable="true"></div>

We can set the text for dragging.
For it we have to add an event listener - ondragstart="onColorDragStart(event)"ondragstart="onColorDragStart(event)"

Html:

<div class="color" style="background-color:#55AAFF" draggable="true" ondragstart="onColorDragStart(event)"></div>

JS:

function onColorDragStart(event) {
  event.dataTransfer.setData("text/plain", '{color:4000001}');
  return true;
  }

After that, i we drag our HTML tag to the active document we see TextFrame with text - {color:4000001}.

Also we can detect dragEnd.
For it we have to add an event listener - ondragend="onColorDragEnd(event)"on

This method allows us to call ExtendScript after Dropping.

Html:

<div class="color" style="background-color:#55AAFF" draggable="true" ondragstart="onColorDragStart(event)" ondragend="onColorDragEnd(event)"></div>

JS:

function onColorDragEnd(ev) {
  var script = 'replaceColorString("{color:4000001}", 70, 150, 255)'; // rgb(70, 150, 255)
  (new nCSInterface).evalScript(script, function(){
       //console.log("Done");
  });
  return true;
}

ExtendScript:

function replaceColorString(targetCode, r, g, b){
    var doc = app.activeDocument;
    if(!doc)
        return;
    for(var lIndex=0; lIndex< doc.layers.length; lIndex++){
        var cLayer = doc.layers[lIndex];
        for(var i=0; i< cLayer.textFrames.length; i++){
            var tFr = cLayer.textFrames;
            if(tFr.contents == targetCode){
                var x = tFr.left+tFr.width; // drop X
                var y = tFr.top-tFr.height; // drop Y
                tFr.remove();
                 // DO SOMETHING
                return;
            }
        }
    }
}

The function replaceColorString() finds our TextFrame and remove it. But we are able to add sovething to our document insted of the TextFrame.

The Git Example shows how you can drag Colors, JPG, SVG, PNG, AI, EPS like layers.

All source is published to Git.

Best regards,

Sergey.

[mannss12691210]

Hi !!

This is not working for INDesign.

Could you please let me know what should i do to make it work for InDesign.

Thanks

[PECourtejoie]

Bumped and moved to the exchange forum

[Choscar]

I am implementing your example but in my extendedscript it can find the image that i am dragging

What means {color:4000001}? I a using {color:1} insteand but i am not sure why {color:4000001}