拖放当前元素JS答案

【问题标题】：drag & drop current element JS拖放当前元素JS
【发布时间】：2021-01-21 06:15:06
【问题描述】：

我有 2 个 div 和 2 个段落。有人能说我怎么能把段落放在当前的 div 中？例子： 1paragraph --> 1div，但是1paragraph不能去2div。 2paragraph --> 2div，但是2paragraph不能去1div。

我的代码：

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>

【问题讨论】：

标签： javascript html drag-and-drop

【解决方案1】：

你试过了吗？

只需设置div 和p 标签的唯一ID。

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>

【讨论】：

我试过了，但是div和p的唯一id怎么办
@user670290 请再次检查答案，因为我给出了一个唯一的 div 和 p id
1.你没有。 2. 我现在就回答我的问题
@user670290 你能告诉我你的输出和我的输出有什么不同吗？
在您的示例中，您可以放入 1div 1paragraph 和 2paragraph，在我的示例中 - 不。在我的示例中，您只能将 par1 放在 div1 中，将 par2 放在 div2 中

【解决方案2】：

试试这个。它适用于这一行

mover.assign('your-div-id') ;

style="display:inline-block"可以有多个div

const mover = {
    target      : null ,
    zMax        : 0 ,
    startX      : 0 ,
    startY      : 0 ,
    pX          : 0 ,
    pY          : 0 ,
    differenceX : 0 ,
    differenceY : 0 ,
    step        : 1 ,
    assign: function(elementId) {
        mover.target = document.getElementById(elementId) ;
        mover.target.addEventListener('mousedown',mover.moveStart,{once:false}) ;
        mover.target.addEventListener('mouseleave',mover.moved,{once:false}) ;
    } ,
    setCurrentPosition: function(reference) {
        let mom      = reference.parentElement ;
        let brothers = Array.from(mom.childNodes) ;
        if(brothers) {
            do{
                brother = brothers.pop() ;
                if(!brother) break ;
                if(brother.style.position) continue ;
                let styles = window.getComputedStyle(brother);
                let marginTop  = parseInt(styles['margin-left'],10) ;
                let marginLeft = parseInt(styles['margin-top'],10) ; ;
                brother.style.left = (brother.offsetLeft-marginLeft) + 'px' ;
                brother.style.top  = (brother.offsetTop-marginTop) + 'px' ;
                brother.style.position = 'absolute' ;
            }while(true) ;
        }
    } ,
    moveStart: function(event) {
        mover.setCurrentPosition(this) ;
        mover.zMax += mover.step ;
        mover.target.style.zIndex = mover.zMax ;
        mover.startX = this.offsetLeft  ;
        mover.startY = this.offsetTop ;
        mover.pX = event.pageX ;
        mover.pY = event.pageY ;
        mover.target.addEventListener('mousemove',mover.moving,{once:true}) ;
        mover.target.addEventListener('mouseup',mover.moved,{once:true}) ;
    } ,
    moving: function(event) {
        mover.differenceX = event.pageX - mover.pX 　;
        mover.differenceY = event.pageY - mover.pY　;
        mover.target.style.position = 'absolute' ;
        mover.target.style.left = mover.startX + mover.differenceX + 'px' ;
        mover.target.style.top  = mover.startY + mover.differenceY + 'px' ;
        mover.target.addEventListener('mousemove',mover.moving,{once:true}) ;
    } ,
    moved: function() {
        mover.target.removeEventListener('mousemove',mover.moving,{once:true}) ;
    } ,
}

【讨论】：

【解决方案3】：

这个问题的答案是：

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>

【讨论】：