1. ~function ($) {
    2.     if (typeof $ === 'undefined') {
    3.         throw new ReferenceError('The current plugin needs to rely on jquery！');
    4.     }
    6.     //=>空函数没用:我们可以把它赋值给所有的回调函数默认值,也就是回调函数不传,执行的就是这个空函数(不会报错)
    7.     let emptyFn = function emptyFn() {
    9.     };
    11.     class Drag {
    12.         constructor(ele, options = {}) {
    13.             if (typeof ele === 'undefined' || ele.nodeType !== 1) {
    14.                 throw new ReferenceError('ele is a must pass parameter and must be an element object！');
    15.             }
    17.             //=>INIT PARAMETERS
    18.             let {
    19.                 selector = ele,
    20.                 dragstart = emptyFn,
    21.                 draging = emptyFn,
    22.                 dragend = emptyFn
    23.             } = options;
    25.             /*
    26.              * dragTarget:同过谁来移动
    27.              * ele:移动谁
    28.              */
    29.             this.ele = ele;
    30.             this.dragTarget = selector;
    31.             if (typeof selector === 'string') {
    32.                 //=>传递一个选择器进来了:我们是想通过操作ELE中某个元素让ELE实现移动
    33.                 this.dragTarget = $(ele).find(selector)[0];
    34.             }
    35.             this.dragstart = dragstart;
    36.             this.draging = draging;
    37.             this.dragend = dragend;
    39.             //=>DRAG-START:保证执行原型上的方法,方法中的THIS都是当前类的实例
    40.             this.dragTarget.addEventListener('mousedown', this.down.bind(this));
    41.         }
    43.         //=>MOUSE-DOWN
    44.         down(ev) {
    45.             this.starX = ev.clientX;
    46.             this.starY = ev.clientY;
    48.             let $ele = $(this.ele);
    49.             this.starL = parseFloat($ele.css('left'));
    50.             this.starT = parseFloat($ele.css('top'));
    52.             this.MOVE = this.move.bind(this);
    53.             this.UP = this.up.bind(this);
    54.             document.addEventListener('mousemove', this.MOVE);
    55.             document.addEventListener('mouseup', this.UP);
    57.             this.dragstart();//=>THIS:当前实例
    58.         }
    60.         //=>MOUSE-MOVE
    61.         move(ev) {
    62.             let {starX, starY, starL, starT} = this,
    63.                 curL = ev.clientX - starX + starL,
    64.                 curT = ev.clientY - starY + starT;
    65.             $(this.ele).css({
    66.                 top: curT,
    67.                 left: curL
    68.             });
    70.             this.curL = curL;
    71.             this.curT = curT;
    72.             this.draging();
    73.         }
    75.         //=>MOUSE-UP
    76.         up(ev) {
    77.             document.removeEventListener('mousemove', this.MOVE);
    78.             document.removeEventListener('mouseup', this.UP);
    80.             this.dragend();
    81.         }
    82.     }
    84.     window.Drag = Drag;
    85. }(jQuery);
    87. /*
    88. new Drag(ele, {
    89.     selector: 'h3' //=>SELECTOR:当前需要操作的目标元素选择器(按住它实现让ELE移动,不传默认就是按住ELE移动)
    90. });*/