将标签文本拖到段落中 [英] Drag label text into paragraph

问题描述

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

例如

 < label id =var1>我是JavaScript新手< / label>`
  

拖放示例

 < p>我是学生和< / p>; 
  

当我在段落结尾处拖动标签时。

$

 < p>所以标签文本应该被复制到段落的末尾。我是一名学生，我是JavaScript新手< / p>; 
  

解决方案

已更新

您可以在此处找到工作实例 。

在两个元素（拖放）之后添加一个 id draggable =true到您要拖动的元素。

现在使用 ondragstart / ondrop 来添加你想要开始拖动和放开标签的指令，并防止函数的默认动作 ondragend& ondragover 。

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

HTML：

 < label id =dragSourcedraggable =true> i am JavaScript新手< / label> 
< p type =textid =dropTarget>在此处放置标签< / p> 
  

JS：

  var dragSource = document.getElementById（dragSource）; 
 
 dragSource.ondragstart = function（event）{
 var dataToCopy = event.target.innerText; 
 event.dataTransfer.setData（Text，dataToCopy）; 
返回true; 
}; 
 
 var dropTarget = document.getElementById（dropTarget）; 
 
 dropTarget.ondrop = function（event）{
 this.innerText = this.innerText ++ event.dataTransfer.getData（Text）; 
 event.preventDefault（）; 
返回false; 
}; 
 
 dropTarget.ondragover = function（event）{
 event.preventDefault（）; 
返回false; 
}; 
 
 dropTarget.ondragend = function（event）{
 event.preventDefault（）; 
返回false; 
}; 
  

或

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

HTML：

 < label draggable =trueondragstart =drag（event）>我是JavaScript新手< / label> 
< p type =textondragover =allowDrop（event）ondrop =drop（event）>我是学生，< / 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

来源

I want to copy a text of a label inside a paragraph by drag and drop the label in to specific path of the paragraph.

e.g.

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

before dragging example

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

when i drag the label at the end of the paragraph.

So the label text should be copied to end of the paragraph and it becomes.

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

解决方案

UPDATED

You can find working exmaple HERE.

Add an id to the both elements (dragged and dropped), after that add attribute draggable = "true" to the element you want to drag.

Now use ondragstart / ondrop to add the instructions your want to do on start of dragging and on dropping the label, and prevent the default action of functions ondragend & ondragover.

Using event.dataTransfer.setData to store the text we want to copy and event.dataTransfer.getData to get the text and past it in the position we want on dropping.

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;
};

OR

You can use javascript inline event handlers (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

这篇关于将标签文本拖到段落中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！