0

我在彩盒中有一个直径为 10px 的小圆圈。拖动圆圈选择一种颜色。但我不希望用户必须将光标准确地放在 10px 圆圈内才能拖动它。如果他们到达圆圈附近的任何地方，比如在圆圈周围 30px 的正方形内，我希望光标捕捉到圆圈的中心。

我知道您可以使用 jQuery UI 捕捉可拖动对象，但捕捉光标。似乎不同。

感谢您的任何想法。

4

3 回答 3

1

讨厌的把戏：http: //jsfiddle.net/coma/KNnXd/

不要在家里这样做

HTML

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

CSS

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;
}

JS

$(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);

    });

});
于 2013-04-29T08:56:32.357 回答
0

通过这些回复，看起来它不可能做我想做的事，最好你不能这样做，或者网站所有者可以为他们的访问者做出选择。

但是，类似的效果可能是在您翻滚时让小圆圈改变可见性。然后，您不必小心地将鼠标准确地移到它上面。你可以直接冲向它，直到你得到可见的反馈，然后停下来。

无论如何，感谢您的回复。

于 2013-04-29T22:48:37.637 回答
0

无法将光标捕捉到目标，但您可以将目标的中心捕捉到光标。

html:

<div id="holder">
    <div id="block"></div>
</div>

CSS：

#holder{
    height: 40px;
    width: 40px;
    padding: 30px;
    cursor: pointer;
}

#block{
    height: 40px;
    width: 40px;
    background-color: black;
    cursor: move;
}

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");
        });
    }
});

这是一个工作示例：http: //jsfiddle.net/Angvs/

希望能帮助到你..

于 2013-04-29T08:09:09.203 回答