0

ドラッグ ハンドルを div に追加しようとしていますが、div は動かず、ハンドルだけです。

しかし、移動するはずのdivの絶対位置に位置を変更すると、実際にはdivの周りを移動できますが、ドラッグハンドルだけでなく、どこからでも移動できます。

任意のヒント ？このためにjsfiddleを作成しました。

http://jsfiddle.net/dymond/tQdFZ/11/

いくつかのコード。

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.style.left = (evt.clientX - diffX) + 'px';
            that.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);
    }
4

1 に答える 1

1

cssを設定してみてください：

.draggable { position: absolute; ...

jsを変更します：

function moveAlong(evt) {
    that.parentNode.style.left = (evt.clientX - diffX) + 'px';
    that.parentNode.style.top = (evt.clientY - diffY) + 'px';
}

parentNodeを移動したいので、ハンドルをドラッグします。

于 2013-03-20T23:24:44.033 に答える