拖放 - JQuery插件

Question

我想創建自己的拖放插件。

我的插件：

$.fn.drag = function(options) { 
    var defaults = { 
     revert: false, 
     onDrag: function() {}, 
     onDrop: function() {} 
    }; 
    var o = $.extend(defaults, options); 
    return this.each(function() { 
     var position = $(this).position(); 
     var ptop = position.top; 
     var pleft = position.left; 
     var down = false; 
     $(this).mousedown(function(event) { 
      down = true; 
      $(this).css({ 
       cursor: 'move', 
      }).mousemove(function(event) { 
       if (down == true) { 
        $(this).css({ 
         cursor: 'move', 
        }); 
        var w = $(this).width(); 
        var h = $(this).height(); 
        var left3 = (w/2) + 7; 
        var top3 = (h/2) + 7; 
        $(this).css({ 
         cursor: 'move', 
         left: (event.clientX) + (3 * 3) - left3, 
         top: (event.clientY) + (3 * 3) - top3 
        }); 
       } 
      }).bind('mousemove', o.onDrag).mouseup(function() { 
       down = false; 
       $(this).css({ 
        cursor: 'default', 
       }); 
       if (o.revert == true) { 
        $(this).animate({ 
         top: ptop, 
         left: pleft 
        }, 300); 
       } else {} 
      }).bind('mouseup', o.onDrop); 
     }); 
    }); 
} 

我的問題：在當我嘗試將它拖到裏面中心光標匹配的元素的時刻。我故意這樣做，因爲我不知道如何製作它，所以如果我點擊它將拖動的元素的任何部分。正如你所看到here

定心光標元素裏面的代碼：

var w = $(this).width(); 
var h = $(this).height(); 
var left3 = (w/2) + 7; 
var top3 = (h/2) + 7; 
$(this).css({ 
    cursor: 'move', 
    left: (event.clientX) + (3 * 3) - left3, 
    top: (event.clientY) + (3 * 3) - top3 
}); 

有沒有辦法不居中元素中的光標，只要你點擊它能夠拖動的元素？

在此先感謝：d

Answer 1

您可以跟蹤的不同的光標位置是與起始光標所在位置mousedown版荷蘭國際集團mousemove，並適當地應用此數據：http://jsfiddle.net/BggPn/15/。

$(this).mousedown(function(event) { 
    down = true; 
    var dx = event.pageX - $(this).position().left, // difference from left border 
     dy = event.pageY - $(this).position().top; // difference from top border 

和：

$(this).css({ 
    cursor: 'move',   // you had set the cursor already by the way 
    left: event.pageX - dx, // set left border to cursor x position minus difference 
    top: event.pageY - dy // set top border to cursor y position minus difference 
});