將光標對準目標

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

通過這些反應它看起來並不像它可能希望做我想要的東西，而且它可能是你不能做或網站所有者可以做出的選擇對於他們的訪客最好的。

但是，類似的效果可能是讓小圓圈在您翻轉時改變可見性。那麼你不必小心地將鼠標移動到它上面。你可以向它充電，直到你得到可見的反饋，然後停止。

無論如何，感謝您的迴應。