JavaScript向下拖動元素。在第一次拖動後跳轉

Question

我寫了這段代碼，當你點擊元素上面的元素時，它的大小將會變大或變小

當我點擊它時，它似乎很好地拖了一下然後試圖拖下來再次導致它從屏幕上掉下來。

function pulldown(element){ 
var puller = document.getElementById(element); 
puller.addEventListener("mousedown", function(e){ 
    var boxStyle = document.getElementById("resizeBox").getAttribute("style"); 
    var currentSize = (boxStyle.match(/\d+/)); 
    var ypos = e.clientY; 
    var resize = document.getElementById("resizeBox"); 
    resize.style.height = currentSize; 

    function watchPull(e){ 
     number2 = currentSize + (e.clientY - ypos); 
     resize.style.height = number2+"px"; 
    } 
    document.addEventListener("mousemove", watchPull,false); 

    document.addEventListener("mouseup", function(e){ 
     document.removeEventListener("mousemove", watchPull, false); 
     number = currentSize + (e.clientY - ypos); 
     resize.style.height = number+"px"; 
    },false) 
},false); 
} 
pulldown("pullDown"); 

這是發生了什麼事。

http://jsfiddle.net/jamcoupe/4hKg8/ （點擊「無項目」，然後拖動黑線向下或向上）

Answer 1

解決它！

把我的毛髮拉出來了！

function pullbox() { 
var pull; 
pull = document.getElementById("pullDown"); 
pull.addEventListener("mousedown", function (e) { 
    e.preventDefault(); 
    var currentSize = new Number((document.getElementById("resizeBox").getAttribute("style").match(/\d+/))); 
    var yClick = e.clientY; 
    function mouseMove(e) { 
     if(currentSize < 0){ 
      currentSize = 0; 
     } 
     e.stopPropagation(); 
     var newTotalMove = ((e.clientY - yClick) + currentSize); 
     document.getElementById("resizeBox").setAttribute("style", "height:" + newTotalMove + "px"); 
    } 
    function mouseUp() { 
     document.removeEventListener("mousemove", mouseMove, false); 
     document.removeEventListener("mouseup", moseUp, false); 
    } 
    document.addEventListener("mousemove", mouseMove, false); 
    document.addEventListener("mouseup", mouseUp, false); 
}, false); 
} 
pullbox(); 

http://jsfiddle.net/jamcoupe/4hKg8/1/