Drag and Drop file content when an anchor tag is dropped into TextArea

Question

In my application there are 2 textarea's and following is the code where I have added "dragover" and "drop" listeners to this 2 textarea's

// for dragover

handleDragOver : function (evt) {
        var self = this;
        evt.preventDefault();
        console.log ("handleDragOver ", evt);
        return;
    }

// for drop

ShowFileContentDiff : function (evt) {
            evt.preventDefault();
            console.log ("ShowFileContentDiff ", evt);
        }

and following the code to bind this events to 2 textarea's

textArea1.bind('dragover', self.handleDragOver);
textArea1.bind('drop', self.ShowFileContentDiff);

textArea2.bind('dragover', self.handleDragOver);
textArea2.bind('drop', self.ShowFileContentDiff);

Now in my app I have an anchor tag which contains the file Name, I want to show the file content in the textarea when I drag this anchor tag into the textarea.

The filecontents are basically stored in jsonstring in some object.

My problem here is in neither of methods mentioned above I am able to access this anchor tag so that I can get the fileContent....

Can some one please let me know how to achieve this.?

Answer 1

I was able to resolve this issue, I am using Jquery UI plugin for Drag and Drop functionality which perfectly suits my requirement and gives me the reference of the element being dragged!!

here is the link for the examples on jquery UI site.

https://jqueryui.com/droppable/#shopping-cart

Answer 2

If your anchor has an id you can do this:

ShowFileContentDiff : function (evt) {
    evt.preventDefault();
    console.log ("ShowFileContentDiff ", evt);
    console.log ("anchor's id: " + evt.target.id);
}