jqueryを使用して簡単なドラッグ効果を実現し、ソースコードを共有します.

フォトフレームの引き延ばしを実現したいので、長い間探していた原因は間違いが見つからなかったので、ソースコードをめくるしかありません.
ドラッグ効果をどのように実現しますか?
DEMOを参照
まずドラッグ効果の原理を分析します.
1.ドラッグされたオブジェクト上でマウスを押す(onmousedownイベントがトリガーされ、オブジェクトの上にマウスがある)
2.マウスの移動を開始(onmousemoveイベントをトリガー)
3.移動時のオブジェクトのtopとleft値の表示
4.マウスを離してドラッグを停止(onmouseupイベントをトリガー)
注:ドラッグするオブジェクトは、位置決めオブジェクト(position:absoluteまたはrelativeが設定されている)である必要があります.
つまりドラッグイベント=onmousedownイベント+onmousemoveイベント
この3つのイベントを処理してdragイベントをシミュレートするプロセスです
私が実装したソースコードを見てみましょう.
htmlコード:

class="drag">
  
class="title">  (      )


class="drag1">
  
class="title">  

       

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/文章、すばらしい!