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/ は（「NO項目」をクリックし、上下の黒い線をドラッグするか）

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/