Snapping cursor to a target

Question

I have a small 10px diameter circle inside a color box. Dragging the circle around chooses a color. But I don't want the user to have to get the cursor exactly inside the 10px circle before they can drag it. If they get anywhere near the circle, say within a 30px square around the circle, I'd like the cursor to snap to the center of the circle.

I know you can snap draggable objects with jQuery UI, but snapping the cursor. seems different.

Thanks for any ideas.

Well, you can snap the circle to the cursor instead since there is no way to change the cursors position. There is a nasty trick... hide the cursor (cursor: none) and make an image of a cursor follow it or move it as you want. — coma, Apr 29 '13 at 07:54
It's not possible to change the cursor position and it would be deadly for usablility in my opinion. There is a good answer in another question asking for a possibility to move the mouse pointer by javascript: http://stackoverflow.com/a/4752512/983992 — Marcel Gwerder, Apr 29 '13 at 07:55
coma: While the "nasty trick" might give the appearance of the cursor snapping to the circle, you couldn't start dragging the circle because the real cursor would still be outside of it. So that doesn't look like a solution. — Steve, Apr 29 '13 at 08:42
Of course it's not a solution, in fact, is ugly as hell (reminds me of the old Macromedia Flash days, no usability at all), but is funny. — coma, Apr 29 '13 at 08:58

score 1 · Answer 1 · answered Apr 29 '13 at 08:56

Nasty trick: http://jsfiddle.net/coma/KNnXd/

DON'T DO THIS AT HOME

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

    });

});

Not that I've used it, but it seems to do the things requested. — user35443, Jun 26 '16 at 11:56

Daniel · Answer 2 · 2013-04-29T08:15:25.990

It's not possible to snap the cursor to a target but you can snap the center of the target to the cursor.

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

Here is a working example: http://jsfiddle.net/Angvs/

Hope it helps..

score 0 · Answer 3 · answered Apr 29 '13 at 22:48

Looking through these responses it doesn't look like its possible to do what I want, and it's probably best that you can't do it or site owners could make choices for their visitors.

A similar effect, though, might be to just have the small circle change visibllity when you roll over it. Then you don't have to be careful to move the mouse exactly over it. You can just charge toward it until you get the visible feedback, and stop.

Anyway, thanks for responding.

Snapping cursor to a target

3 Answers3