Jquery implementation layer drag, support callback function

Recently in writing a CMS Content management system, the front desk is basically using AJAX asynchronous request server, through ASHX processing, return JSON format processing. Because of the need for a more user-friendly interface, so the use of the drag layer operation.

The following is the main core method of drag layer, originally want to write plug-ins, consider not so much time, in the way of the method.

/*   * Jquery 鼠标左键拖动面板   * coder：新生帝   * obj：jQuery选择器名称   * callback：回调函数（拖动停止要执行的函数），可通过$(this)获取 obj 对象   */   function movePanel(obj,callback){      var _evenObj= null ;  // 触发事件的对象      var _move= false ;        // 移动标识      var _x,_y;          //鼠标离控件左上角的相对位置      $(obj).bind({              mousedown: function (e){                  _evenObj=e.currentTarget;       // 当前触发的作用对象                  _move= true ;                  var cx=$(_evenObj).position().left; // 获取父类的X轴偏移量，如果相对屏幕的偏移量，请把position()改为offset();                  var cy=$(_evenObj).position().top;  // 获取父类的Y轴偏移量 , 同上                  _x=e.pageX-cx;                       _y=e.pageY-cy;               },              mouseup: function (){                  //判断方法是否存在                  if ( typeof callback != 'undefined' && callback instanceof Function) {                      $ext=$.extend({},$(obj));   // 为obj对象扩展回调方法                      $ext.addMethod=callback;                      $ext.addMethod();                  }              }      });      $(document).bind({              mousemove: function (e){                  if (e.which==1){              // 判断是否是左键按下                      if (_evenObj!= null ){      // 判断触发事件的对象是否为空                          if (_move){                              var x=e.pageX-_x;                              var y=e.pageY-_y;                              $(_evenObj).css({                                      top:y,                                      left:x                              });                          }                      }                  }              },              mouseup: function (){                  _evenObj= null ;                  _move= false ;              }      }); }

The above is to implement the left mouse button to drag the main method, the following is called:

//别忘了引用Jquery库文件。<br>// 调用=================================================          $( function () {              movePanel( ".move" , function (){   //有回调函数                  alert( "哈哈哈，我是执行完后在显示的，我作用的对象是class为：" +$( this ).attr( "class" )+ " 的div" );              });              movePanel( ".move2" );        //没有回调函数      }); //=====================================================

This allows for a simple method call to implement the drag of the layer, support callback functions, if you want to expand, you can expand in $ (obj). bind ({}).

The following is the HTML code that drags the layer Web site.

<! DOCTYPE html>