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/