Question

我正在尝试将div设置为触发mousedown事件的位置。有点像滚动条。如果我不断按住按钮并移动鼠标，我希望div跟随鼠标。我该怎么做呢？我所拥有的mousedown事件只是将我点击的值添加到点击元素的顶部。

$("#scroll").on("mousedown", function(ev){
    var y_pos = ev.pageY;
    $(this).animate({top: });
    console.log(y_pos);
})

Answer 1

罗伯特M Here提出了一个很好的建议，即用鼠标移动来移动div。我添加了JSFiddle Example -

This Fiddle Example会考虑您的设计。必须更改css以允许该功能工作，因此可以考虑稍微改变你的css，然后动态地获得最高和最高Y点的最高位置和最高位置。

HTML：

<div id="content1">    
    Suggested by <a href="https://stackoverflow.com/users/2242705/robert-m">Robert M</a>
</div>

CSS

div {
    width:200px;
    height:200px;
    border:1px solid #000;
    position:relative; /* make sure the div you want to move is relative*/
}
#content1 {
    background-color:blue;
}

罗伯特的剧本

jQuery.fn.dragdrop = function (el) {
        this.bind('mousedown', function (e) {
            var relX = e.pageX - $(el).offset().left;
            var relY = e.pageY - $(el).offset().top;
            var maxX = $('body').width() - $(el).width() - 10;
            var maxY = $('body').height() - $(el).height() - 10;
            $(document).bind('mousemove', function (e) {
                var diffX = Math.min(maxX, Math.max(0, e.pageX - relX));
                var diffY = Math.min(maxY, Math.max(0, e.pageY - relY));
                $(el).css('left', diffX + 'px').css('top', diffY + 'px');
            });
        });
        $(window).bind('mouseup', function (e) {
            $(document).unbind('mousemove');
        });
        return this;
    };
    $(document).ready(function () {
        return $('div').dragdrop('div');
    });

Answer 2

您可以尝试用此替换脚本，看看是否获得了所需的输出。我很快就做到了这一点，所以我不确定它是否100％正确，但我认为这会让你知道它应该如何编写。

$(document).ready(function(){

    var initialPositionY = 0;
    var currentPositionY = 0;
    var move = false;

    $("#scroll").on("mousedown", function(ev){
        var y_pos = ev.pageY;
        initialPositionY = ev.pageY;
        move = true;
        console.log(move + ' -- ' + initialPositionY + ' -- ' + y_pos);
    });

    $("#scroll").on("mousemove", function(ev){
        if(move == true){
            var y_pos = ev.pageY;
            y_pos = ev.pageY - initialPositionY + currentPositionY;

            if(y_pos > 0)
                $(this).animate({top: y_pos}, 10);

            console.log(move + ' -- ' + initialPositionY + ' -- ' + y_pos);
        }
    });

    $("#scroll").on("mouseup", function(ev){
        var y_pos = ev.pageY;
        currentPositionY += ev.pageY - initialPositionY;
        move = false;

        console.log(move + ' -- ' + currentPositionY + ' -- ' + y_pos);
    });
});

动画到鼠标/触摸位置

2 个答案: