通过拖动标签将文本从标签复制到特定的段落点击点

copy text from label into a specific paragraph clicked point by dragging the label

本文关键字：标签 段落点 复制 拖动 文本      更新时间：2023-09-26

我想将下面标签中的文本复制到特定的课程拖动点，例如

<label id="text_to_be_copy">我是一名学生<标签>

所以我在下面有一段

<p>这是我想要通过拖动标签标签<p>

就好像我把标签拖到文字"这是我想要的内容"后面的段落里

标签在此点后拖动

所以拖动后会看起来像

<p>这是我希望我是学生通过拖动标签标签<p>

感谢

您可以使用HTML 5拖放

代码笔上的线路DEMO

运行示例代码：

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>

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

你想喜欢这个。。？

将一个字段值拖动到另一个字段

示例：http://jsfiddle.net/pxfunc/5kpeJ/

相关文章：