Drag label text into paragraph

Question

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

It sounds like you really, really should not be using `` for this. `` elements describe form controls (like ``) you don't seem to have a form control anywhere near your code. — Quentin, Aug 01 '15 at 09:02
yap but it does not needs form control it can be done in javascript or jquery thanks — , Aug 01 '15 at 09:20

score 1 · Accepted Answer · edited May 23 '17 at 11:51

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

this is good example can u modify it that should be copied to the courser area in paragraph — , Aug 01 '15 at 09:30
but thanks for the example it will also help i will try my best if u help me than i will be thankful — , Aug 01 '15 at 09:33
**copied to the courser area in paragraph**, just replace `this.innerText +" "+ event.dataTransfer.getData("Text");` by `event.dataTransfer.getData("Text") +" "+ this.innerText;`. — Zakaria Acharki, Aug 01 '15 at 09:37

Drag label text into paragraph

1 Answers1

Linked