javascript 向下拖动一个元素。第一次拖动后跳跃答案

【问题标题】：javascript dragging an element down. jumps after first dragjavascript 向下拖动一个元素。第一次拖动后跳跃
【发布时间】：2012-01-09 23:19:07
【问题描述】：

我写了这段代码，当你点击元素时，它上面的元素会调整为更大或更小

当我点击它时，它似乎很好地向下拖动了一次，然后再次尝试向下拖动会导致它从屏幕上消失。

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/ （点击“无项目”，然后向下或向上拖动黑线）

【问题讨论】：

我自己解决了这个问题，我只需要等待回答。 jsfiddle.net/jamcoupe/4hKg8/1

标签： javascript draggable

【解决方案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/

【讨论】：