我正在尝试沿线拖动元素。他们应该互相推动，而不是越过或越过。
为避免阴影元素在拖动时浮动，我拖动了一个sub-div，这反过来又影响了外部div的位置。除松开触发clientX = 0！？！
http://codepen.io/primavera133/pen/EKvbYV
HTML：
<div class="box" >
<div class="box-inner" draggable="true"></div>
</div>
<div class="box2">
</div
CSS：
.box {
width: 50px;
height: 50px;
background-color: hotpink;
position: absolute;
top: 0;
left: 0;
}
.box-inner {
width: 100%;
height: 100%;
}
.box2 {
width: 50px;
height: 50px;
background-color: rebeccapurple;
position: absolute;
left: 200px;
top: 0;
}
JS：
var b = document.querySelector('.box');
var bi = document.querySelector('.box-inner');
var b2 = document.querySelector('.box2');
bi.addEventListener('dragstart', function(){
console.log("dragstart")
}, false);
bi.addEventListener('drag', function(event){
bLeft = event.clientX;
b2Left = b2.offsetLeft;
b.style.left = bLeft + "px";
if(b2Left-50 <= bLeft){
b2.style.left = (bLeft + 50) + "px";
}
console.log("drag", event.clientX, event.target.offsetParent.offsetLeft, b2.offsetLeft);
}, false);
bi.addEventListener('dragend', function(){
console.log("dragend")
}, false);
为什么会这样，我该怎么做才能避免将其重置？
默认情况下，不能将数据/元素删除到其他元素中。要允许放置，必须在拖移时阻止对元素的默认处理。
document.addEventListener("dragover", function(event) {
// prevent default to allow drop
event.preventDefault();
}, false);
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句