drag & drop current element JS

问题

I have 2 divs and 2 paragraphs. Could someone say how could I put paragraph in current div? Example: 1paragraph --> 1div, but 1paragraph can't go to 2div. 2paragraph --> 2div, but 2paragraph can't go to 1div.

My Code:

var dragClass, dropClass;
function allowDrop(ev) {
  ev.preventDefault();
}

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

function drop(ev) {
  var data = ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
  ev.preventDefault();
}

#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" class="1element"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" class="2element"></div>
<br>
<p id="drag1" draggable="true" ondragstart="drag(event)" class="1element">This is a draggable paragraph. Drag this element into the rectangle.</p>
<p id="drag1" draggable="true" ondragstart="drag(event)" class="2element">This is a draggable paragraph. Drag this element into the rectangle.</p>

回答1:

Have you tried this?

Just set unique id of div and p tag.

var dragClass, dropClass;
function allowDrop(ev) {
  ev.preventDefault();
}

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

function drop(ev) {
  var data = ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
  ev.preventDefault();
}

#div1 ,#div2{
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

<html>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" class="1element"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" class="2element"></div>
<br>
<p id="drag1" draggable="true" ondragstart="drag(event)" class="1element">This is a draggable paragraph. Drag this element into the rectangle.</p>
<p id="drag2" draggable="true" ondragstart="drag(event)" class="2element">This is a draggable paragraph. Drag this element into the rectangle.</p>
</body>
</html>

回答2:

The answer for this question is:

var dragClass, dropClass;


function allowDrop(ev) {
  dropClass = event.target.classList;
      if(`${dropClass}` === `${dragClass}`) {
        ev.preventDefault();
      } else {}
}

function drag(ev) {
   ev.dataTransfer.setData("Text", ev.target.id);
   dragClass = event.target.classList;
   
}

function drop(ev) {
  var data = ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
  ev.preventDefault();
}

#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
#div2 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" class="boat"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" class="house"></div>
<br>
<p id="drag1" draggable="true" ondragstart="drag(event)" class="boat">This is a draggable paragraph. Drag this element into the rectangle.</p>
<p id="drag2" draggable="true" ondragstart="drag(event)" class="house">This is a draggable paragraph. Drag this element into the rectangle.</p>
<p id="demo"></p>

来源：https://stackoverflow.com/questions/65822050/drag-drop-current-element-js

标签

javascript

html

drag-and-drop