0

不透明度をドラッグ可能なdivに設定しましたが、問題は、divの移動を開始したときにのみ、マウスの下に不透明度を追加したくないということです。XとYに接続する必要がありますが、実際には方法がわかりません。

これは私が持っているものです。

  function startDrag(evt) { // To start the opacity function

        this.style.opacity = "0.5";
}

そして、マウスを上に向けて停止します

  function changeClass() {
            var diceClass = document.getElementsByClassName("draggble");
            for (var i = 0; i < diceClass.length; i++) {
                diceClass[i].style.opacity="1";
            }
        }

jsFiddle http://jsfiddle.net/dymond/tQdFZ/6/

4

1 に答える 1

1

私は機能this.style.opacity = "0.5";からstartDrag機能へと移動しましたmoveAlong。

デモ

(function (document) {

    var draggable = document.getElementsByClassName('draggable'),
        draggableCount = draggable.length,
        i, currZ = 1;


    function startDrag(evt) {

        var diffX = evt.clientX - this.offsetLeft,
            diffY = evt.clientY - this.offsetTop,
            that = this;

        this.style.zIndex = currZ++;

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


        function stopDrag() {
            document.removeEventListener('mousemove', moveAlong);
            document.removeEventListener('mouseup', stopDrag);
            changeClass()
        }

        function changeClass() {
            var diceClass = document.getElementsByClassName("draggable");
            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);
    }
}(document));
于 2013-02-13T14:51:50.257 に答える