[英]position bug in draggable div
我的div表現得有些奇怪,當我第一次將其移動正常時,但第二次該位置開始出現錯誤時,我的位置是:在主div中是絕對的,僅此而已。
知道如何清除錯誤嗎? http://jsfiddle.net/dymond/tQdFZ/14/ <-jsfiddle
JavaScript的。
var draggable = document.getElementsByClassName('hand'),
draggableCount = draggable.length,
i, currZ = 1;
function startDrag(evt) {
var diffX = evt.clientX - this.offsetLeft,
diffY = evt.clientY - this.offsetTop,
that = this;
this.style.opacity = "0.5";
this.style.zIndex = currZ++;
function moveAlong(evt) {
that.parentNode.style.left = (evt.clientX - diffX) + 'px';
that.parentNode.style.top = (evt.clientY - diffY) + 'px';
}
function stopDrag() {
document.removeEventListener('mousemove', moveAlong);
document.removeEventListener('mouseup', stopDrag);
changeClass()
}
function changeClass() {
var diceClass = document.getElementsByClassName("hand");
for (var i = 0; i < diceClass.length; i++) {
diceClass[i].style.opacity = "1";
}
}
document.addEventListener('mouseup', stopDrag);
document.addEventListener('mousemove', moveAlong);
}
for (i = 0; i < draggableCount; i += 1) {
draggable[i].addEventListener('mousedown', startDrag);
}
CSS
**.draggable {
position: absolute;
width: 100px;
height: 100px;
background: red;
}
.hand{
cursor : move;
width: 98px;
min-height: 16px;
background: yellow;
border:1px solid black;
}
textarea{
padding-top:20px;
resize : none;
overflow : hidden;
background : transparent;
width:95px;
border:none;
}
offsetLeft
和offsetTop
的this
始終是0,因為this
是指.hand
不.dragabble
所以這個:
var diffX = evt.clientX - this.offsetLeft,
diffY = evt.clientY - this.offsetTop,
應該是這樣的:
var diffX = evt.clientX - this.parentNode.offsetLeft,
diffY = evt.clientY - this.parentNode.offsetTop,
更新的小提琴: http : //jsfiddle.net/knoxzin1/tQdFZ/15/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.