移動div時不透明度不當鼠標移動時的不透明度

Question

我已經設置了一個不透明度爲可拖動的div，但問題是我不想在鼠標下方添加不透明度，只有當我開始移動div時。 應該連接到X和Y，但我真的沒有得到如何。

這就是我所擁有的。

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

     this.style.opacity = "0.5"; 
} 

，並停止在OCH鼠標向上

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/

Answer 1

我感動this.style.opacity = "0.5";從startDrag功能moveAlong功能。

Demo

(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));