使用jquery實現簡單的拖動效果，分享源碼

標籤：

因為想實現相框的拖到，找了半天的原因愣是沒有找到錯誤，所以，只能翻看源碼了

如何?拖動效果？

瀏覽DEMO

首先分析下拖動效果原理：

1.當滑鼠在被拖動對象上按下滑鼠（觸發onmousedown事件，且滑鼠在對象上方）

2.開始移動滑鼠（觸發onmousemove事件）

3.移動時更顯對象的top和left值

4.滑鼠放開停止拖動(觸發onmouseup事件)

注意：拖動的對象必須是定位對象(即設定了position:absolute或 relative)。

也就是說拖動事件=onmousedown事件+onmousemove事件

整個過程就是處理這三個事件來類比drag事件

現在看看我實現的原始碼：

html代碼：

<div class="drag">  <p class="title">標題(點擊標題拖動)</p></div><div class="drag1">  <p class="title">標題</p>  點擊我移動</div>

jquery外掛程式代碼：

(function($){    $.fn.drag=function(options){    //預設配置    var defaults = {        handler:false,        opacity:0.5        };       // 覆蓋預設配置    var opts = $.extend(defaults, options);    this.each(function(){    //初始標記變數    var isMove=false,    //handler如果沒有設定任何值，則預設為移動對象本身，否則為所設定的handler值    handler=opts.handler?$(this).find(opts.handler):$(this),    _this=$(this), //移動的對象    dx,dy;    $(document)    //移動滑鼠，改變對象位置    .mousemove(function(event){    // console.log(isMove);    if(isMove){      //獲得滑鼠移動後位置    var eX=event.pageX,eY=event.pageY;    //更新對象座標     _this.css({‘left‘:eX-dx,‘top‘:eY-dy});            }        })    //當放開滑鼠，停止拖動    .mouseup(function(){        isMove=false;        _this.fadeTo(‘fast‘, 1);        //console.log(isMove);            });    handler    //當按下滑鼠，設定標記變數isMouseDown為true    .mousedown(function(event){    //判斷最後觸發事件的對象是否是handler    if($(event.target).is(handler)){        isMove=true;        $(this).css(‘cursor‘,‘move‘);        //console.log(isMove);        _this.fadeTo(‘fast‘, opts.opacity);        //滑鼠相對於移動對象的座標        dx=event.pageX-parseInt(_this.css("left"));        dy=event.pageY-parseInt(_this.css("top"));            }                 });         });    }; })(jQuery);

調用方法：

  $(function(){  //拖動標題  $(".drag").drag({handler:$(‘.title‘),//操作拖動的對象，此對象必須是移動對象的子項目opacity:0.7 //設定拖動時透明度});  //拖動主體對象  $(".drag1").drag({ opacity:0.7 });  });

表明：參考http://www.muzilei.com/文章，太贊了！

使用jquery實現簡單的拖動效果，分享源碼