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/