Question

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

e.g。

<label id="var1">i am new to JavaScript</label>`

拖动示例之前

<p>i am a student and </p>;

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

因此标签文本应该复制到段落的末尾，然后变为。

<p>i am a student and  i am new to JavaScript </p>;

Answer 1

<强>已更新

你可以找到工作的例子 HERE 。

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

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

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

HTML：

<label id="dragSource" draggable = "true">i am new to JavaScript</label>
<p type="text" id="dropTarget">Drop label here</p>

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内联事件处理程序（knowing that some developers see that it is a bad practice）。

HTML：

<label draggable="true" ondragstart="drag(event)">i am new to JavaScript</label> <p type="text" ondragover="allowDrop(event)" ondrop="drop(event)">i am a student and</p>

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

<强> Source

将标签文本拖到段落中

1 个答案: