先端学習ノートのドラッグ（二）プラグイン編

すみません、お待たせしました。最近よく出張していますが、プロジェクトがとても忙しいです。参考: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.js落菵
sortable.js：独立したJSプラグインです。jqueryはいらないです。Sortableはとても軽いです。圧縮後は2 KBしかないです。html 5ドラッグを採用しています。https://github.com/RubaXa/Sortable
html 5についてドラッグしてください。三O(∩∩)Oはは。
簡単な例:

  
    
    
    
    
    
  
  
    

      

        1
        2
        3
        4
        5
        6
        7
      
    
  
  
    var el = document.getElementById('sortleft');
    new Sortable(el,{
      group: "name"
    });
  

もちろんたくさんの方法と配置があります。これは大神さんたちが自分で文書を見てください。（ㄒoㄒ）/~
jQuery UI——sortable葃33781;
sortable.jsもjqueryモードに変換できます。いくつかのファイルを導入する必要があります。ここでは言いません。今jqueryUIというプラグインについて話していますが、中にはsortableのようなドラッグプラグインがあります。
公式サイト:http://jqueryui.com/
簡単なケース:

  
  
  
  
  
  
  
  
  $(function() {
    $( "#sortable" ).sortable({
      revert: true
    });
    $( "#draggable" ).draggable({
      connectToSortable: "#sortable",
      helper: "clone",
      revert: "invalid"
    });
    $( "ul, li" ).disableSelection();
  });
  


 

    
    
        
    



  
Item 1
  
Item 2
  
Item 3
  
Item 4
  
Item 5

もちろん、jqueryUIの中には多くの面白い強力な機能があります。興味のある猿（媛）たちは見てもいいです。
この文章は比較的に忙しい中に暇を見つけて書いたので、比較的に頼れるかもしれません。具体的に分析する時間がなくて、直接コードをつけました。最初は本人もコードを直接見るのが嫌いです。そうすると、そのような意味がありません。えっと、皆さん、とりあえず我慢してください。問題があります。バグがあればコメントしてもいいです。（_ひ）にこにこと……。
続いてドラッグします。HTML 5の下のドラッグもあります。この文章はちゃんと書きます。勉強の心得をよく共有して、楽しみにしています。