Question

我正在尝试创建一个jquery函数来跟踪带有div的鼠标光标，当它处于mousedown时，当它在mouseup上时它保持在它的最后位置。

任何建议。

Answer 1

为什么不简单地使用jquery拖放：

<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>

Jquery draggable

Answer 2

我汇总了一个定义Draggable对象的简单工作示例。您可以指定拖动项（您正在移动的元素），以及拖动边界（您正在移动项目的空间或元素）。如果您想要将可拖动项目限制在页面上的某个空间（例如容器），或者定义一个基于数学的相对坐标系，则边界的概念很重要。

我的解决方案不是最快的，但它证明了这个概念：

$(function() {

    window.mousedown = 0;
    $(window).on('mousedown mouseup', function(e) {
        if(e.type == 'mousedown') { this.mousedown++; }
        else { this.mousedown--; }
    });

    var Draggable = function(dragItem, dragBoundary) {
        this.item = $(dragItem).css('position', 'absolute');
        this.item.on('mousemove', $.proxy(this.handleDragEvent, this));
        this.boundary = $(dragBoundary).css('position', 'relative');
    };

    Draggable.prototype.handleDragEvent = function(e) {
        if(window.mousedown) {

            var mousePosition = this.mapToBoundary([e.clientX, e.clientY]);
            var mouseX = mousePosition[0],
                mouseY = mousePosition[1];

            if(typeof this.prevMouseX == "undefined") this.prevMouseX = mouseX;
            if(typeof this.prevMouseY == "undefined") this.prevMouseY = mouseY;

            this.itemX = this.item.offset().left - this.boundary.offset().left;
            this.itemY = this.item.offset().top - this.boundary.offset().top;

            var deltaX = mouseX - this.prevMouseX,
                deltaY = mouseY - this.prevMouseY;

            this.item.css({
                'left': this.itemX + deltaX,
                'top': this.itemY + deltaY
            });

            this.prevMouseX = mouseX;
            this.prevMouseY = mouseY;

        }
    };

    Draggable.prototype.mapToBoundary = function(coord) {
        var x = coord[0] - this.boundary.offset().left;
        var y = coord[1] - this.boundary.offset().top;
        return [x,y];
    };

    var draggable = new Draggable($('.draggable'), $('.container'));

});

请注意，我们在全局上维护mousedown值，这样我们就可以确定何时适合拖动我们的元素（我们只添加 mousemove 侦听器到拖动项目本身）。我还在边界div上方添加了一个间隔div，以演示如何在页面的任何位置移动边界，并且坐标系仍然准确。实际上限制在其指定边界内的可拖动项目的代码可以使用简单的数学来编写。

这是小提琴：http://jsfiddle.net/bTh9s/3/

修改

以下是限制其容器中的Draggable项的一些代码的开始。

Draggable.prototype.restrictItemToBoundary = function() { var position = this.item.position(); position.right = position.left + this.item.outerWidth(); position.bottom = position.top + this.item.outerHeight(); if(position.left <= 0) { this.item.css('left', 1); } else if(position.right >= this.boundary.outerWidth()) { this.item.css('left', this.boundary.outerWidth() - this.item.outerWidth()); } if(position.top <= 0) { this.item.css('top', 1); } else if(position.bottom >= this.boundary.outerHeight()) { this.item.css('top', this.boundary.outerHeight() - this.item.outerHeight()); } };

在更新拖动项的CSS定位之后，应该在Draggable.handleDragEvent内部调用此方法。看来这个解决方案很奇怪，但这是一个开始。

当鼠标处于mousedown时，使用鼠标跟随鼠标

2 个答案: