簡體   English   中英

可拖動div中的位置錯誤

[英]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;
}

offsetLeftoffsetTopthis始終是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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM