时间戳

首页 > 解决方案 > 按下自身时的javascript ondrag

javascript - 按下自身时的javascript ondrag

问题描述

在 div 里面我有一组 p 元素。我想将选定的元素拖到输入示例：

var input = document.getElementById("test");
input.addEventListener('drop', function (event) {
    event.preventDefault();
    var textData = event.dataTransfer.getData('text'); // get the dragged value
    var oldval = event.target.value; // get the old value in the input
    var newval = oldval + textData; // add it with the value which is dragged upon
    event.target.value = newval; // change the value with the new value
});
document.querySelector('[draggable="true"]').addEventListener('dragstart', function(e){
  e.dataTransfer.setData('text', e.target.innerHTML);
});
<input id="test" placeholder='drag here'/>

<div>

<p draggable="true"> Tag 1</p>

<p draggable="true"> Tag 2</p>

<p draggable="true" > Tag 3</p>

</div>
我想在拖动时将文本从 p 元素传输到输入，但是以多种方式，对于所有 p 元素

如何在拖动多个元素中的任何一个时，从 p 元素中获取文本并将其放入输入中，并在它们之间切换以防通过 JavaScript 或 JQuery 选择另一个元素

标签： javascripthtmljquery

解决方案

querySelector仅针对第一个元素，使用querySelectorAll获取所有段落的列表，然后将事件绑定到每个段落

var input = document.getElementById("test");
input.addEventListener('drop', function(event) {
  event.preventDefault();
  var textData = event.dataTransfer.getData('text'); // get the dragged value
  var oldval = event.target.value; // get the old value in the input
  var newval = oldval + textData; // add it with the value which is dragged upon
  event.target.value = newval; // change the value with the new value
});
document.querySelectorAll('[draggable="true"]').forEach(paragraph => {
  paragraph.addEventListener('dragstart', function(e) {
    e.dataTransfer.setData('text', e.target.innerHTML);

  })
});
<input id="test" placeholder='drag here' />

<div>

  <p draggable="true"> Tag 1</p>

  <p draggable="true"> Tag 2</p>

  <p draggable="true"> Tag 3</p>

</div>

推荐阅读