将标签文本拖到段落中

我想通过将标签拖放到段落的特定路径中来复制段落中标签的文本。

例如

i am new to JavaScript` 

在拖动示例之前

 
i am a student and 
; 

当我在段落的末尾拖动标签时。

因此标签文本应该复制到段落的末尾并且变为。

 
i am a student and i am new to JavaScript 
; 

Answer 1

更新

你可以在这里找到工作的例子。

在向要拖动的元素添加属性draggable = "true"之后，向两个元素添加id （拖放）。

现在使用ondragstart / ondrop添加您想要在开始拖动和删除标签时执行的指令，并阻止函数ondragend & ondragover的默认操作。

使用event.dataTransfer.setData来存储我们要复制的文本，使用event.dataTransfer.getData来获取文本并将其放在我们想要删除的位置。

HTML：

 i am new to JavaScript 
Drop label here 

JS：

 var dragSource = document.getElementById("dragSource"); dragSource.ondragstart = function(event) { var dataToCopy = event.target.innerText; event.dataTransfer.setData("Text", dataToCopy); return true; }; var dropTarget = document.getElementById("dropTarget"); dropTarget.ondrop = function(event) { this.innerText = this.innerText +" "+ event.dataTransfer.getData("Text"); event.preventDefault(); return false; }; dropTarget.ondragover = function(event) { event.preventDefault(); return false; }; dropTarget.ondragend = function(event) { event.preventDefault(); return false; }; 

要么

您可以使用javascript内联事件处理程序（ 知道一些开发人员认为这是一个不好的做法 ）。

HTML：

 i am new to JavaScript 
i am a student and 

JS：

 drag = function(ev) { event.dataTransfer.setData("text", ev.target.innerText); } drop = function(ev) { ev.target.innerText = ev.target.innerText +" "+ event.dataTransfer.getData("Text"); } allowDrop = function(ev) { ev.preventDefault(); } 

的jsfiddle

资源