Jquery 将光标捕捉到目标

我有一个直径为10px的小圆圈在一个颜色框内。拖动圆可以选择一种颜色。但我不希望用户在拖动光标之前，必须将光标精确地放在10px的圆圈内。如果他们在圆附近，比如说在圆周围30px的正方形内，我希望光标捕捉到圆的中心

我知道可以使用jQuery UI捕捉可拖动的对象，但要捕捉光标。 看起来不一样

---

谢谢你的建议。

不可能将光标捕捉到目标，但可以将目标的中心捕捉到光标

html:

jquery：

var drag = $('#holder');
drag.draggable({
    start: function() {
        $(document).mousemove(function (e) {
            drag.offset({ top: e.pageY-50, left: e.pageX-50 });
        }).click(function () {
            $(this).unbind("mousemove");
        });
    }
});

以下是一个工作示例：

希望能有帮助。

恶作剧：

不要在家里这样做

HTML

<div id="area">
    <div>
        <div></div>
    </div>
</div>
<div id="cursor"></div>

JS

html {
    cursor: none;
}

#cursor {
    background: transparent url(http://telcontar.net/Misc/screeniecursors/Cursor%20arrow%20Aero.png) no-repeat 0 0;
    width: 17px;
    height: 23px;
    position: absolute;
    pointer-events: none;
}

#area {
    height: 300px;
    background-color: #eee;
}

#area > div {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 20px;
}

#area > div > div {
    background-color: #333;
    width: 1em;
    height: 1em;
    border-radius: .5em;
    font-size: 10px;
}

$(function() {

    var area = $('#area');
    var circle = area.children('div');
    var cursor = $('#cursor');
    var html = $('html');

    circle.draggable();

    var xo = 0;
    var yo = 0;

    var refresh = function(event) {

        cursor.css({
            left: event.clientX - xo,
            top: event.clientY - yo
        });

    };

    html.mousemove(function(event) {

        refresh(event);

    });

    circle.mousedown(function(event) {

        xo = event.clientX - (circle.offset().left + circle.outerWidth() / 2);
        yo = event.clientY - (circle.offset().top + circle.outerHeight() / 2);

        refresh(event);

    });

    circle.mouseup(function(event) {

        xo = 0;
        yo = 0;

        refresh(event);

    });

});

---

从这些回复来看，似乎不可能做到我想做的事情，最好是你不能做到，或者网站所有者可以为他们的访问者做出选择

不过，一个类似的效果可能是，当你翻过小圆圈时，它的可视性会发生变化。那你就不必小心把鼠标移到它上面了。你可以向它冲过去，直到你得到可见的反馈，然后停下来

---

无论如何，感谢您的响应。

好吧，您可以将圆圈捕捉到光标上，因为无法更改光标的位置。有一个肮脏的把戏。。。隐藏光标（cursor:none）并使光标的图像跟随它或根据需要移动它。我认为，改变光标位置是不可能的，这对实用性来说是致命的。在另一个问题中有一个很好的答案，该问题询问是否可以通过javascript移动鼠标指针：coma：虽然“讨厌的把戏”可能会让光标看起来像是捕捉到了圆，但您无法开始拖动圆，因为真正的光标仍然在圆之外。因此，这看起来不像是一个解决方案。当然，这不是一个解决方案，事实上，它非常难看（让我想起了过去的Macromedia Flash时代，根本没有可用性），但很有趣。不是我用过它，而是它似乎做了要求的事情。

html {
    cursor: none;
}

#cursor {
    background: transparent url(http://telcontar.net/Misc/screeniecursors/Cursor%20arrow%20Aero.png) no-repeat 0 0;
    width: 17px;
    height: 23px;
    position: absolute;
    pointer-events: none;
}

#area {
    height: 300px;
    background-color: #eee;
}

#area > div {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 20px;
}

#area > div > div {
    background-color: #333;
    width: 1em;
    height: 1em;
    border-radius: .5em;
    font-size: 10px;
}

$(function() {

    var area = $('#area');
    var circle = area.children('div');
    var cursor = $('#cursor');
    var html = $('html');

    circle.draggable();

    var xo = 0;
    var yo = 0;

    var refresh = function(event) {

        cursor.css({
            left: event.clientX - xo,
            top: event.clientY - yo
        });

    };

    html.mousemove(function(event) {

        refresh(event);

    });

    circle.mousedown(function(event) {

        xo = event.clientX - (circle.offset().left + circle.outerWidth() / 2);
        yo = event.clientY - (circle.offset().top + circle.outerHeight() / 2);

        refresh(event);

    });

    circle.mouseup(function(event) {

        xo = 0;
        yo = 0;

        refresh(event);

    });

});