将锚标记拖放到 TextArea 时拖放文件内容答案

【问题标题】：Drag and Drop file content when an anchor tag is dropped into TextArea将锚标记拖放到 TextArea 时拖放文件内容
【发布时间】：2014-02-20 20:22:01
【问题描述】：

在我的应用程序中有 2 个 textarea，以下是我向这 2 个 textarea 添加“dragover”和“drop”侦听器的代码

// 用于拖动

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

// 用于丢弃

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

并按照代码将此事件绑定到 2 个文本区域

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

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

现在在我的应用程序中，我有一个包含文件名的锚标记，当我将此锚标记拖到文本区域时，我想在文本区域中显示文件内容。

文件内容基本上存储在某个对象的jsonstring中。

我的问题不在于上面提到的任何一种方法，我都无法访问此锚标记，以便获取 fileContent....

有人可以告诉我如何实现这一目标吗？

【问题讨论】：

标签： jquery html drag-and-drop textarea file-copying

【解决方案1】：

如果你的锚有一个 id，你可以这样做：

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

【讨论】：

不，它不工作，它给了我对我要放置锚标记的文本区域的引用。

【解决方案2】：

我能够解决这个问题，我正在使用 Jquery UI 插件来实现拖放功能，这完全符合我的要求，并为我提供了被拖动元素的参考！！

这里是 jquery UI 站点上示例的链接。

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

【讨论】：