0

i want to copy the text in the following label to the specific courser dragged point eg

<label id="text_to_be_copied" > i am a student </label>

so i have a paragraph below

<p> this is the content where i want to copy the label text by dragging the label tag </p>

as if i drag the label into the paragraph after the text "this is the content where i want"

label dragged after this point

so after dragging it will look like

<p> this is the content where i want i am a student to copy the label text by dragging the label tag </p>

thanks

2 Answers2

1

You can use HTML 5 Drag and Drop

Line DEMO on codepen

Running sample code:

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.innerText = document.getElementById(data).innerText;
}
label, p{
  border: 1px solid #ccc;
}

p {
  min-height: 100px;
}
<label id="text_to_be_copied" draggable="true" ondragstart="drag(event)"> i am a student </label>
  
<p  ondrop="drop(event)" ondragover="allowDrop(event)">  </p>
Braj
  • 46,415
  • 5
  • 60
  • 76
  • yes but i want to drag and drop in the courser pointed area @braj –  Aug 01 '15 at 12:33
  • as i am new to javascript and i do not have an idea of the builton function to detect the courser pointed area to past the label –  Aug 01 '15 at 12:45
  • i will do will u get me to the expert of the javascript api's thanks –  Aug 01 '15 at 12:48
  • I am a backend developer in Java. I don't have much knowledge in Javascript. I just read about HTML 5 and whatever I know about drag and drop functionality I added in the post. – Braj Aug 01 '15 at 12:52
  • i have posted a question earlier which was related to my question but that did not work for me that was related to my question https://jsfiddle.net/e7rf4sz7/6/ –  Aug 01 '15 at 12:52
0
var input = document.querySelector('input');

input.addEventListener('input', function()
{
    console.log('input changed to: ', input.value);
});

you want to like this ..?

dragging one field value into another field

examples: http://jsfiddle.net/pxfunc/5kpeJ/

KAUSHAL J. SATHWARA
  • 994
  • 9
  • 15
  • nop i donot want like this. A few minutes ago i have posted related post but there i was not cleared my answer it is some how done but this does not give me the result i want http://stackoverflow.com/questions/31760101/drag-label-text-into-paragraph –  Aug 01 '15 at 12:22
  • this matches some how to my answer but this only add the label text at the end of paragraph by dragging the label –  Aug 01 '15 at 12:23
  • i want to copy the label text in the courser drop point of the paragraph thanks –  Aug 01 '15 at 12:24