javascript - 防止光标在旋转元素时进入某个区域？

Question

我正在使用 jQuery 可旋转来旋转页面上的元素。

但是，我想防止用户将光标拖向元素的中心。本质上，当用户试图向中心拖动时，鼠标指针应该沿着以目标元素中心为中心的圆滑动。

$('.element').rotatable({
    handle: $('.element .handle'),
    start: function( event, ui ) {
        rotate_in_progress = true;
    },
    stop: function( event, ui ) {
        rotate_in_progress = false;
    },
    rotate: function( event, ui ) {
        //current mouse position
  var mouse_pos = {
            "x": event.clientX,
            "y": event.clientY
        };
  var element_center = {
    "x": parseInt($('.element').css("left")) + 0.5 * parseInt($('.element').css("width")),
    "y": parseInt($('.element').css("top")) + 0.5 * parseInt($('.element').css("height"))
  };
  console.log(mouse_pos,element_center);
        //TODO prevent mouse from moving within 20px of the center of the element; slide it along the edge of a circle with radius = 20px around the center in this case
    }
});

当前小提琴：

http://jsfiddle.net/Lqrpsp53/8/

标签： javascriptjqueryjquery-ui