jquery - ターゲットへのカーソルのスナップ

Question

カラーボックス内に直径10pxの小さな円があります。円をドラッグして色を選択します。しかし、ユーザーがカーソルをドラッグする前に、カーソルを10pxの円の中に正確に入れる必要はありません。それらが円の近く、たとえば円の周りの 30 ピクセルの正方形内にある場合は、カーソルを円の中心にスナップさせたいと思います。

jQuery UIでドラッグ可能なオブジェクトをスナップできることは知っていますが、カーソルをスナップします。違うようです。

アイデアをありがとう。

Answer 1

カーソルをターゲットにスナップすることはできませんが、ターゲットの中心をカーソルにスナップすることはできます。

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/

それが役に立てば幸い..