大佬教程收集整理的这篇文章主要介绍了拖放当前元素JS，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我有 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>
你试过吗？
只需设置 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>,
这个问题的答案是：
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>,
试试这个。它适用于这一行
@H_766_12@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',{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',moved: function() {
mover.target.removeEventListener('mousemove',}
以上是大佬教程为你收集整理的拖放当前元素JS全部内容，希望文章能够帮你解决拖放当前元素JS所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。