前端学习笔记の拖拽（二）插件篇

引言：大家久等了，对不住了。最近经常出差，项目很赶啊，宝宝心很累/(ㄒoㄒ)/~~。
参考：http://www.cnblogs.com/lrzw32/p/4696655.html

源代码：https://github.com/WZOnePiece/study-draggable

jquery 插件化##

起始插件化：

; (function($, window, undefined) {
    $.fn.drag  = function(options) {
        drag(this)
    }

})(jquery, window, undefined);

其他的代码类似前篇拖拽基础篇http://www.jianshu.com/p/feca77ec252e。只是需要将一些dom操作改为jquery操作。详细代码：

; (function($, window, undefined) {
  //拖拽元素
  function DragElement(node) {
    this.target = node;
    node.onselectstart = function() {
      return false;//防止文字选中
    }
  }
  DragElement.prototype = {
    constructor: DragElement,
    setXY: function(x, y) {
      this.x = parseInt(x) || 0;
      this.y = parseInt(y) || 0;
      return this;
    },
    setTargetCss: function(css) {
      $(this.target).css(css);
      return this;
    }
  }

  //鼠标
  function Mouse() {
    this.x = 0;
    this.y = 0;
  }
  Mouse.prototype.setXY = function(x, y) {
    this.x = parseInt(x);
    this.y = parseInt(y);
  }

  //拖拽配置
  var draggableConfig = {
    zIndex:10,
    dragElement: null,
    mouse: new Mouse()
  };

  var draggableStyle = {
    dragging: {
      cursor: 'move'
    },
    defaults: {
      cursor: 'auto'
    }
  }

  var $document = $(document);

  function drag($ele) {
    var $dragNode = $ele;

    $dragNode.on({
      'mousedown': function(event) {
        var dragElement = draggableConfig.dragElement = new DragElement($ele.get(0));

        draggableConfig.mouse.setXY(event.clientX, event.clientY);
        draggableConfig.dragElement.setXY(dragElement.target.style.left, dragElement.target.style.top)
          .setTargetCss({
            'zIndex': draggableConfig.zIndex ++,
            'position': 'relative'
          });
      },
      'mouseover': function() {
        $(this).css(draggableStyle.dragging);
      },
      'mouseout':function() {
        $(this).css(draggableStyle.defaults);
      }
    })
  }

  function move(event) {
    if(draggableConfig.dragElement) {
      var mouse = draggableConfig.mouse,
        dragElement = draggableConfig.dragElement;
      dragElement.setTargetCss({
        'left': parseInt(event.clientX - mouse.x + dragElement.x) + 'px',
        'top': parseInt(event.clientY - mouse.y + dragElement.y) + 'px'
      });

      $document.off('mousemove', move);
      setTimeout(function() {
        $document.on('mousemove', move);
      }, 25);
    }
  }

  $document.on({
    "mousemove": move,
    'mouseup': function() {
      draggableConfig.dragElement = null;
    }
  });

  $.fn.drag  = function(options) {
    drag(this)
  }

})(jQuery, window, undefined);

拖拽引用：

  window.onload = function() {
    var dragObj = $("#drag");
    dragObj.drag();
}

jQuery拖拽插件 —— sortable##

sortable.js###

sortable.js:是一个独立的JS插件，不需要jquery，Sortable非常轻量，压缩后只有2KB，采用的是html5拖拽。https://github.com/RubaXa/Sortable

有关html5拖拽请期待 拖拽三 O(∩_∩)O哈哈~。

简单例子：

  
    
    
    
    
    
  
  
    

      

        1
        2
        3
        4
        5
        6
        7
      
    
  
  

当然还有许多方法和配置，这就需要大神们自己看看文档了O(∩_∩)O哈哈_{,小渣我就不说了。/(ㄒoㄒ)/}~

jQueryUI——sortable###

sortable.js也可以转换为jquery模式，需要引入一些文件，这里就不说了。现在说说jqueryUI这款插件，里面也是有类似sortable的拖拽插件的。

官网：http://jqueryui.com/

简单案例：

  
  
  
  
  
  
  
  


 

    
请拖拽我
        
    



  
Item 1
  
Item 2
  
Item 3
  
Item 4
  
Item 5

当然，在jqueryUI插件中还有许多有趣强大的功能，有兴趣的猿（媛）们可以看看。

这篇文章是在比较忙里偷闲下写的，可能比较赖，没时间具体分析了，就直接上代码了。起始本人也是比较讨厌直接看代码的，这样就没有那种分享的意味了。哎，各位就先将就下吧，有问题，有bug可以评论下留言哈。(^__) 嘻嘻……。

接下来拖拽篇还有一篇HTML5下的拖拽，这篇我会好好的写的，好好分享下学习心得，好期待哈O(∩_∩)O哈！