本文介绍了拖曳删除当前元素JS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有2个div和2个段落.有人可以说我该如何将段落放在当前的div中?例子:1段->1div,但1paragraph不能转到2div.2段->2div,但是2paragraph不能转到1div.
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.
我的代码:
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>
推荐答案
尝试一下.它适用于这一行
try this. It works with this one line
mover.assign('your-div-id') ;
可以使用 style ="display:inline-block"
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}) ;
} ,
}
这篇关于拖曳删除当前元素JS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!