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

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/