将光标对准目标

Question

我在彩色框内有一个小的10px直径圆。拖动圆圈选择一种颜色。但我不希望用户必须在10px圆内完全移动光标，才能拖动它。如果它们靠近圆圈，比如在圆圈周围30px的正方形内，我想让光标捕捉到圆圈的中心。

我知道你可以使用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/

希望它可以帮助..

Answer 2

下流的手段：http://jsfiddle.net/coma/KNnXd/

千万不要这么做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); 

    }); 

}); 

Answer 3

通过这些反应它看起来并不像它可能希望做我想要的东西，而且它可能是你不能做或网站所有者可以做出的选择对于他们的访客最好的。

但是，类似的效果可能是让小圆圈在您翻转时改变可见性。那么你不必小心地将鼠标移动到它上面。你可以向它充电，直到你得到可见的反馈，然后停止。

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