1. 程式人生 > >自定義Jquery拖拽外掛

自定義Jquery拖拽外掛

新增節點,修改樣式

$("body").append("<div>123</div>");
 $("body div").attr("id","box")
 $("body div").css({"background":"red","width":"100px","height":"100px","position":"absolute"});
 //自定義外掛
 (function($){
 $.fn.extend({
 'draw':function(){
 $(this).mousedown(function(e){
 var L = e.offsetX;
 var T = e.offsetY;
 $(this).mousemove(function(e){
 var iX = e.pageX - L ; 
 var iY = e.pageY - T;
 $(this).css({"left":iX+"px","top":iY+"px"});
 }) 
 $(this).mouseup(function(){//滑鼠彈起,解除對MouseMove的繫結
 $(this).unbind('mousemove');
 })
 }) 
 }
 });
 })(jQuery);
 
 $("#box").draw();//呼叫外掛