前端學習筆記の拖拽(二)插件篇

引言:大家久等了厦取,對不住了。最近經常出差,項目很趕啊洼怔,寶寶心很累/(ㄒ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.reibang.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哈哈~域那。

簡單例子:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="author" content="NARUTOne">
    <title>Sortable拖拽</title>
    <script type="text/javascript" src="./lib/Sortable.js"></script>
    <style media="screen">
      div {
        width: 800px;
        padding: 50px;
        border: 1px solid #ededed;
        margin: 100px auto;
      }
      div::after {
        content: '';
        display: table;
        clear: both;
      }
      p {
        width: 420px;
      }
      span {
        width: 120px;
        margin-right: 20px;
        margin-bottom: 10px;
        float: left;
        height:30px;
        /*border: 1px solid red;*/
        background-color: #26a4fe;
        color: #fff;
        font-weight: bold;
        text-align: center;
        line-height: 30px;
      }
    </style>
  </head>
  <body>
    <div class="">
      <p id="sortleft" class='item'>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
      </p>
    </div>
  </body>
  <script type="text/javascript">
    var el = document.getElementById('sortleft');
    new Sortable(el,{
      group: "name"
    });
  </script>
</html>

當然還有許多方法和配置咙边,這就需要大神們自己看看文檔了O(∩_∩)O哈哈,小渣我就不說了。/(ㄒoㄒ)/~

jQueryUI——sortable###

sortable.js也可以轉換為jquery模式次员,需要引入一些文件败许,這里就不說了。現(xiàn)在說說jqueryUI這款插件淑蔚,里面也是有類似sortable的拖拽插件的市殷。

官網:http://jqueryui.com/

簡單案例:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="author" content="NARUTOne">
  <title>jQuery UI 拖動(Draggable) + 排序(Sortable)</title>
  <link rel="stylesheet" href="./lib/jquery-ui.css">
  <script src="./lib/jquery-2.2.1.js"></script>
  <script src="./lib/jquery-ui.js"></script>
  <style>
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
   }
  li {
    margin: 5px;
    padding: 5px;
    width: 150px;
  }
  li svg {
      width:1em;
      height:1em;
    }
  </style>
  <script>
  $(function() {
    $( "#sortable" ).sortable({
      revert: true
    });
    $( "#draggable" ).draggable({
      connectToSortable: "#sortable",
      helper: "clone",
      revert: "invalid"
    });
    $( "ul, li" ).disableSelection();
  });
  </script>
</head>
<body>
 <svg style="display:none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="icon-delete" viewBox="0 0 25.128 31.87">
      <path d="M21.987,3.9H3.141C1.404,3.9,0,5.306,0,7.042v0.855h25.128V7.042c0-1.736-1.405-3.163-3.141-3.163   M16.5,1.91l0.463,2.624H8.165l0.463-2.5L16.5,1.971 M16.751,0H8.377C7.512,0,6.709,0.699,6.585,1.556l-0.61,3.518  c-0.12,0.855,0.49,1.554,1.352,1.554h10.472c0.863,0,1.474-0.699,1.354-1.556l-0.613-3.765C18.419,0.452,17.616,0,16.751,0   M22.512,9.922H2.616c-1.151,0-2.008,0.938-1.904,2.085l1.714,17.778c0.104,1.146,1.133,2.085,2.286,2.085h15.702  c1.153,0,2.182-0.938,2.284-2.085l1.717-17.778C24.518,10.86,23.663,9.922,22.512,9.922 M8.679,27.798H5.234l-1.047-14.04h4.491  V27.798z M14.556,27.798h-3.985v-14.04h3.985V27.798z M19.894,27.798h-3.245v-14.04h4.292L19.894,27.798z"></path>
    </symbol>
</svg>
<ul>
    <li id="draggable" class="ui-state-highlight">請拖拽我
        <svg ><use xlink:href="#icon-delete"></use></svg>
    </li>
</ul>

<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

</body>
</html>

當然,在jqueryUI插件中還有許多有趣強大的功能刹衫,有興趣的猿(媛)們可以看看醋寝。

這篇文章是在比較忙里偷閑下寫的,可能比較賴带迟,沒時間具體分析了音羞,就直接上代碼了。起始本人也是比較討厭直接看代碼的邮旷,這樣就沒有那種分享的意味了黄选。哎,各位就先將就下吧婶肩,有問題办陷,有bug可以評論下留言哈。(__) 嘻嘻……律歼。

接下來拖拽篇還有一篇HTML5下的拖拽民镜,這篇我會好好的寫的,好好分享下學習心得险毁,好期待哈O(∩_∩)O哈制圈!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市畔况,隨后出現(xiàn)的幾起案子鲸鹦,更是在濱河造成了極大的恐慌,老刑警劉巖跷跪,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件馋嗜,死亡現(xiàn)場離奇詭異,居然都是意外死亡吵瞻,警方通過查閱死者的電腦和手機葛菇,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進店門甘磨,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人眯停,你說我怎么就攤上這事济舆。” “怎么了莺债?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵滋觉,是天一觀的道長。 經常有香客問我齐邦,道長椎瘟,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任侄旬,我火速辦了婚禮肺蔚,結果婚禮上,老公的妹妹穿的比我還像新娘儡羔。我一直安慰自己宣羊,他們只是感情好,可當我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布汰蜘。 她就那樣靜靜地躺著仇冯,像睡著了一般。 火紅的嫁衣襯著肌膚如雪族操。 梳的紋絲不亂的頭發(fā)上苛坚,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天,我揣著相機與錄音色难,去河邊找鬼泼舱。 笑死,一個胖子當著我的面吹牛枷莉,可吹牛的內容都是我干的娇昙。 我是一名探鬼主播,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼笤妙,長吁一口氣:“原來是場噩夢啊……” “哼冒掌!你這毒婦竟也來了?” 一聲冷哼從身側響起蹲盘,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤股毫,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后召衔,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體铃诬,經...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了氧急。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡毫深,死狀恐怖吩坝,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情哑蔫,我是刑警寧澤钉寝,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站闸迷,受9級特大地震影響嵌纲,放射性物質發(fā)生泄漏。R本人自食惡果不足惜腥沽,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一逮走、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧今阳,春花似錦师溅、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至妖谴,卻和暖如春窿锉,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背膝舅。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工嗡载, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人仍稀。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓鼻疮,卻偏偏與公主長得像,于是被迫代替她去往敵國和親琳轿。 傳聞我的和親對象是個殘疾皇子判沟,可洞房花燭夜當晚...
    茶點故事閱讀 45,922評論 2 361

推薦閱讀更多精彩內容