Sortable.js拖拽排序使用方法解析

更新時(shí)間：2016年11月04日 08:43:02 作者：qq281113270

這篇文章主要為大家詳細(xì)解析了Sortable.js拖拽排序使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近公司項(xiàng)目經(jīng)常用到一個(gè)拖拽 Sortable.js插件，所以有空的時(shí)候看了 Sortable.js 源碼，總共1300多行這樣，寫的挺完美的。

官網(wǎng): http://rubaxa.github.io/Sortable/

拖拽的時(shí)候主要由這幾個(gè)事件完成，

ondragstart 事件：當(dāng)拖拽元素開始被拖拽的時(shí)候觸發(fā)的事件，此事件作用在被拖曳元素上
ondragenter 事件：當(dāng)拖曳元素進(jìn)入目標(biāo)元素的時(shí)候觸發(fā)的事件，此事件作用在目標(biāo)元素上
ondragover 事件：拖拽元素在目標(biāo)元素上移動(dòng)的時(shí)候觸發(fā)的事件，此事件作用在目標(biāo)元素上
ondrop 事件：被拖拽的元素在目標(biāo)元素上同時(shí)鼠標(biāo)放開觸發(fā)的事件，此事件作用在目標(biāo)元素上
ondragend 事件：當(dāng)拖拽完成后觸發(fā)的事件，此事件作用在被拖曳元素上

主要是拖拽的時(shí)候發(fā)生ondragstart事件和ondragover事件的時(shí)候節(jié)點(diǎn)交換位置，其實(shí)就是把他們的節(jié)點(diǎn)互相調(diào)換，當(dāng)然這只是最簡(jiǎn)單的拖拽排序方式，里面用到了許多技術(shù)比用判斷拖拽滾動(dòng)條的時(shí)候是滾動(dòng)拖拽元素上面的根節(jié)點(diǎn)的父節(jié)點(diǎn)滾動(dòng)，還是滾動(dòng)window上面的滾動(dòng)條，還有拖拽的時(shí)候利用getBoundingClientRect() 屬性判斷鼠標(biāo)是在dom節(jié)點(diǎn)的左邊，右邊，上面，還是下面。還有利用回調(diào)和函數(shù)式編程聲明函數(shù)，利用布爾值相加相減去，做0和1判斷，利用了事件綁定來判定兩個(gè)列表中的不同元素，這些都是很有趣的技術(shù)。

注意：這個(gè)插件是用html5 拖拽的所以也不支持ie9 以下瀏覽器

接下來我們先看看簡(jiǎn)單的簡(jiǎn)單的dome，先加載他的拖拽js Sortable.js 插件，和app.css. 創(chuàng)建一個(gè)簡(jiǎn)單的拖拽很簡(jiǎn)單只要傳遞一個(gè)dom節(jié)點(diǎn)進(jìn)去就可以，第二個(gè)參數(shù)傳一個(gè)空對(duì)象進(jìn)去

當(dāng)然app.css，加不加無所謂，如果不加的話要加一個(gè)樣式就是

.sortable-ghost {
 opacity: 0.4;
 background-color: #F4E2C9;
 }

拖拽的時(shí)候有陰影效果更好看些

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
</head>
 <link href="app.css" rel="stylesheet" type="text/css"/>
 <script src="Sortable.js"></script>
 <body>
 <ul id="foo" class="block__list block__list_words">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 <li>7</li>
 <li>8</li>
 </ul>
 
 <script>
 Sortable.create(document.getElementById('foo'), {});
 </script> 
</body>
</html>

該插件還提供了拖拽時(shí)候動(dòng)畫，讓拖拽變得更炫，很簡(jiǎn)單加多一個(gè)參數(shù)就行animation: 150，拖拽時(shí)間內(nèi)執(zhí)行完動(dòng)畫的時(shí)間。里面是用css3動(dòng)畫的ie9以下瀏覽器含ie9瀏覽器不支持

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
</head>
 <link href="app.css" rel="stylesheet" type="text/css"/>
 <script src="Sortable.js"></script>
 <body>
 <ul id="foo" class="block__list block__list_words">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 <li>7</li>
 <li>8</li>
 </ul>
 
 <script>
 Sortable.create(document.getElementById('foo'), 
 {
 animation: 150, //動(dòng)畫參數(shù)
 });
 </script> 
</body>
</html>

這個(gè)插件不僅僅提供拖拽功能，還提供了拖拽完之后排序，當(dāng)然排序的思維很簡(jiǎn)單，判斷鼠標(biāo)按下去拖拽的那個(gè)節(jié)點(diǎn)和拖拽到目標(biāo)節(jié)點(diǎn)的兩個(gè)元素發(fā)生ondragover的時(shí)候判斷他們的dom節(jié)點(diǎn)位置，并且互換dom位置就形成了排序。拖拽完成只有 Sortable.js 插件還提供了幾個(gè)事件接口，我們看看那dome，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
</head>
 <link href="app.css" rel="stylesheet" type="text/css"/> 
 <script src="Sortable.js"></script>
 <body>
 <ul id="foo" class="block__list block__list_words">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 <li>7</li>
 <li>8</li>
 </ul>
 <script>
 Sortable.create(document.getElementById('foo'), {
 animation: 150, //動(dòng)畫參數(shù)
 onAdd: function (evt){ //拖拽時(shí)候添加有新的節(jié)點(diǎn)的時(shí)候發(fā)生該事件
  console.log('onAdd.foo:', [evt.item, evt.from]); 
 },
 onUpdate: function (evt){ //拖拽更新節(jié)點(diǎn)位置發(fā)生該事件
  console.log('onUpdate.foo:', [evt.item, evt.from]); 
 },
 onRemove: function (evt){ //刪除拖拽節(jié)點(diǎn)的時(shí)候促發(fā)該事件
  console.log('onRemove.foo:', [evt.item, evt.from]); 
 },
 onStart:function(evt){ //開始拖拽出發(fā)該函數(shù)
  console.log('onStart.foo:', [evt.item, evt.from]);
 },
 onSort:function(evt){ //發(fā)生排序發(fā)生該事件
  console.log('onSort.foo:', [evt.item, evt.from]);
 },
 onEnd: function(evt){ //拖拽完畢之后發(fā)生該事件
  console.log('onEnd.foo:', [evt.item, evt.from]); 
 }
 });
 </script> 
</body>
</html>

我們看看上面的例子，首先看看當(dāng)拖拽完成的時(shí)候他發(fā)生事件順序

onAdd onRemove 沒有觸發(fā)說明當(dāng)列表中的拖拽數(shù)據(jù)有增加和減少的時(shí)候才會(huì)發(fā)生該事件，當(dāng)然如果有興趣的朋友可以看看他生事件的順序和條件。
還有傳遞一個(gè)evt參數(shù)，我們看看該參數(shù)有些什么東西。主要看_dispatchEvent 這個(gè)函數(shù) 改函數(shù)的功能是:創(chuàng)建一個(gè)事件，事件參數(shù)主要由name 提供，并且觸發(fā)該事件，其實(shí)就是模擬事件并且觸發(fā)該事件。
看看改函數(shù)的關(guān)鍵源碼

var evt = document.createEvent('Event'), //創(chuàng)建一個(gè)事件
 options = (sortable || rootEl[expando]).options, //獲取options 參數(shù)
 //name.charAt(0) 獲取name的第一個(gè)字符串
 //toUpperCase() 變成大寫
 //name.substr(1) 提取從索引為1下標(biāo)到字符串的結(jié)束位置的字符串
 //onName 將獲得 on+首個(gè)字母大寫+name從第一個(gè)下標(biāo)獲取到的字符串
 onName = 'on' + name.charAt(0).toUpperCase() + name.substr(1);

 evt.initEvent(name, true, true); //自定義一個(gè)事件

 evt.to = rootEl; //在觸發(fā)該事件發(fā)生evt的時(shí)候，將evt添加多一個(gè)to屬性，值為rootEl
 evt.from = fromEl || rootEl; //在觸發(fā)該事件發(fā)生evt的時(shí)候，將evt添加多一個(gè)to屬性，值為rootEl
 evt.item = targetEl || rootEl; //在觸發(fā)該事件發(fā)生evt的時(shí)候，將evt添加多一個(gè)to屬性，值為rootEl
 evt.clone = cloneEl; //在觸發(fā)該事件發(fā)生evt的時(shí)候，將evt添加多一個(gè)to屬性，值為rootEl

 evt.oldIndex = startIndex; //開始拖拽節(jié)點(diǎn)
 evt.newIndex = newIndex; //現(xiàn)在節(jié)點(diǎn)
 //觸發(fā)該事件，并且是在rootEl 節(jié)點(diǎn)上面 。觸發(fā)事件接口就這這里了。onAdd: onUpdate: onRemove:onStart:onSort:onEnd:

接下來事件有了，我們?cè)趺醋雠判蚰?？其?shí)很簡(jiǎn)單，只要我們做排序的列表中加一個(gè)drag-id就可以，然后在拖拽過程中有幾個(gè)事件onAdd， onUpdate，onRemove，onStart，onSort，onEnd，然后我們不需要關(guān)心這么多事件，我們也不需要關(guān)心中間拖拽發(fā)生了什么事情。然后我們關(guān)心的是當(dāng)拖拽結(jié)束之后我們只要調(diào)用onEnd事件就可以了然后改接口會(huì)提供 evt。 evt中可以有一個(gè)from就是拖列表的根節(jié)點(diǎn)，只要獲取到改節(jié)點(diǎn)下面的字節(jié)的就可以獲取到排序id。請(qǐng)看dome

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
</head>
 <link href="app.css" rel="stylesheet" type="text/css"/> 
 <script src="Sortable.js"></script>
 
 <body>
 <ul id="foo" class="block__list block__list_words">
 <li drag-id="1">1</li>
 <li drag-id="2">2</li>
 <li drag-id="3">3</li>
 <li drag-id="4">4</li>
 <li drag-id="5">5</li>
 <li drag-id="6">6</li>
 <li drag-id="7">7</li>
 <li drag-id="8">8</li>
 </ul>
 <script>
 Sortable.create(document.getElementById('foo'), {
 animation: 150, //動(dòng)畫參數(shù)
 onAdd: function (evt){ //拖拽時(shí)候添加有新的節(jié)點(diǎn)的時(shí)候發(fā)生該事件
  console.log('onAdd.foo:', [evt.item, evt.from]); 
 },
 onUpdate: function (evt){ //拖拽更新節(jié)點(diǎn)位置發(fā)生該事件
  console.log('onUpdate.foo:', [evt.item, evt.from]); 
 },
 onRemove: function (evt){ //刪除拖拽節(jié)點(diǎn)的時(shí)候促發(fā)該事件
  console.log('onRemove.foo:', [evt.item, evt.from]); 
 },
 onStart:function(evt){ //開始拖拽出發(fā)該函數(shù)
  console.log('onStart.foo:', [evt.item, evt.from]);
 },
 onSort:function(evt){ //發(fā)生排序發(fā)生該事件
  console.log('onSort.foo:', [evt.item, evt.from]);
 },
 onEnd: function(evt){ //拖拽完畢之后發(fā)生該事件
  console.log('onEnd.foo:', [evt.item, evt.from]); 
  var id_arr=''
  for(var i=0, len=evt.from.children.length; i<len; i++){
  id_arr+=','+ evt.from.children[i].getAttribute('drag-id');
  }
  id_arr=id_arr.substr(1);
  //然后請(qǐng)求后臺(tái)ajax 這樣就完成了拖拽排序
  console.log(id_arr);
 }
 });
 </script> 
</body>
</html>

該插件還提供了多列表拖拽。下面dome是從a列表拖拽到b列表，b列表拖拽到a列表兩個(gè)倆表互相拖拽，然后主要參數(shù)是 group

如果group不是對(duì)象則變成對(duì)象，并且group對(duì)象的name就等于改group的值并且添加多['pull', 'put'] 屬性默認(rèn)值是true

如果設(shè)置

group{
            pull:true, 則可以拖拽到其他列表否則反之
            put:true, 則可以從其他列表中放數(shù)據(jù)到改列表，false則反之
         }
pull: 'clone', 還有一個(gè)作用是克隆，就是當(dāng)這個(gè)列表拖拽到其他列表的時(shí)候不會(huì)刪除改列表的節(jié)點(diǎn)。

看看簡(jiǎn)單的列表互相拖拽dome 只要設(shè)置參數(shù)group:"words", group的name要相同才能互相拖拽

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
</head>
 <link href="app.css" rel="stylesheet" type="text/css"/>
 <script src="Sortable.js"></script>
 <body>
 <div class="container" style="height: 520px">
 <div data-force="30" class="layer block" style="left: 14.5%; top: 0; width: 37%">
 <div class="layer title">List A</div>
 <ul id="foo" class="block__list block__list_words">
 <li>бегемот</li>
 <li>корм</li>
 <li>антон</li>
 <li>сало</li>
 <li>железосталь</li>
 <li>валик</li>
 <li>кровать</li>
 <li>краб</li>
 </ul>
 </div>
 
 
 
 
 <div data-force="18" class="layer block" style="left: 58%; top: 143px; width: 40%;">
 <div class="layer title">List B</div>
 <ul id="bar" class="block__list block__list_tags">
 <li>казнить</li>
 <li>,</li>
 <li>нельзя</li
 ><li>помиловать</li>
 </ul>
 </div>
 </div>
 
 <script>
 
 Sortable.create(document.getElementById('foo'), {
 group:"words",
 animation: 150, //動(dòng)畫參數(shù)
 onAdd: function (evt){ //拖拽時(shí)候添加有新的節(jié)點(diǎn)的時(shí)候發(fā)生該事件
  console.log('onAdd.foo:', [evt.item, evt.from]); 
 },
 onUpdate: function (evt){ //拖拽更新節(jié)點(diǎn)位置發(fā)生該事件
  console.log('onUpdate.foo:', [evt.item, evt.from]); 
 },
 onRemove: function (evt){ //刪除拖拽節(jié)點(diǎn)的時(shí)候促發(fā)該事件
  console.log('onRemove.foo:', [evt.item, evt.from]); 
 },
 onStart:function(evt){ //開始拖拽出發(fā)該函數(shù)
  console.log('onStart.foo:', [evt.item, evt.from]);
 },
 onSort:function(evt){ //發(fā)生排序發(fā)生該事件
  console.log('onSort.foo:', [evt.item, evt.from]);
 },
 onEnd: function(evt){ //拖拽完畢之后發(fā)生該事件
  console.log('onEnd.foo:', [evt.item, evt.from]); 
 }
 });
 
 
 Sortable.create(document.getElementById('bar'), {
  group:"words",
  animation: 150, //動(dòng)畫參數(shù)
 onAdd: function (evt){ //拖拽時(shí)候添加有新的節(jié)點(diǎn)的時(shí)候發(fā)生該事件
  console.log('onAdd.foo:', [evt.item, evt.from]); 
 },
 onUpdate: function (evt){ //拖拽更新節(jié)點(diǎn)位置發(fā)生該事件
  console.log('onUpdate.foo:', [evt.item, evt.from]); 
 },
 onRemove: function (evt){ //刪除拖拽節(jié)點(diǎn)的時(shí)候促發(fā)該事件
  console.log('onRemove.foo:', [evt.item, evt.from]); 
 },
 onStart:function(evt){ //開始拖拽出發(fā)該函數(shù)
  console.log('onStart.foo:', [evt.item, evt.from]);
 },
 onSort:function(evt){ //發(fā)生排序發(fā)生該事件
  console.log('onSort.foo:', [evt.item, evt.from]);
 },
 onEnd: function(evt){ //拖拽完畢之后發(fā)生該事件
  console.log('onEnd.foo:', [evt.item, evt.from]); 
 }
 }); 
 
 </script> 
</body>
</html>

當(dāng)然也支持只能從a列表拖拽到b列表 dome

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
</head>
 <link href="app.css" rel="stylesheet" type="text/css"/>
 <script src="Sortable.js"></script>
 <body>
 <div class="container" style="height: 520px">
 <div data-force="30" class="layer block" style="left: 14.5%; top: 0; width: 37%">
 <div class="layer title">List A</div>
 <ul id="foo" class="block__list block__list_words">
 <li>бегемот</li>
 <li>корм</li>
 <li>антон</li>
 <li>сало</li>
 <li>железосталь</li>
 <li>валик</li>
 <li>кровать</li>
 <li>краб</li>
 </ul>
 </div>
 
 
 
 
 <div data-force="18" class="layer block" style="left: 58%; top: 143px; width: 40%;">
 <div class="layer title">List B</div>
 <ul id="bar" class="block__list block__list_tags">
 <li>казнить</li>
 <li>,</li>
 <li>нельзя</li
 ><li>помиловать</li>
 </ul>
 </div>
 </div>
 
 <script>
 
 Sortable.create(document.getElementById('foo'), {
 group: {
  name:"words",
  pull: true,
  put: true 
  },
 animation: 150, //動(dòng)畫參數(shù)
 onAdd: function (evt){ //拖拽時(shí)候添加有新的節(jié)點(diǎn)的時(shí)候發(fā)生該事件
  console.log('onAdd.foo:', [evt.item, evt.from]); 
 },
 onUpdate: function (evt){ //拖拽更新節(jié)點(diǎn)位置發(fā)生該事件
  console.log('onUpdate.foo:', [evt.item, evt.from]); 
 },
 onRemove: function (evt){ //刪除拖拽節(jié)點(diǎn)的時(shí)候促發(fā)該事件
  console.log('onRemove.foo:', [evt.item, evt.from]); 
 },
 onStart:function(evt){ //開始拖拽出發(fā)該函數(shù)
  console.log('onStart.foo:', [evt.item, evt.from]);
 },
 onSort:function(evt){ //發(fā)生排序發(fā)生該事件
  console.log('onSort.foo:', [evt.item, evt.from]);
 },
 onEnd: function(evt){ //拖拽完畢之后發(fā)生該事件
  console.log('onEnd.foo:', [evt.item, evt.from]); 
 }
 });
 
 
 Sortable.create(document.getElementById('bar'), {
  group: {
  name:"words",
  pull: false,
  put: true 
  },
 animation: 150, //動(dòng)畫參數(shù)
 onAdd: function (evt){ //拖拽時(shí)候添加有新的節(jié)點(diǎn)的時(shí)候發(fā)生該事件
  console.log('onAdd.foo:', [evt.item, evt.from]); 
 },
 onUpdate: function (evt){ //拖拽更新節(jié)點(diǎn)位置發(fā)生該事件
  console.log('onUpdate.foo:', [evt.item, evt.from]); 
 },
 onRemove: function (evt){ //刪除拖拽節(jié)點(diǎn)的時(shí)候促發(fā)該事件
  console.log('onRemove.foo:', [evt.item, evt.from]); 
 },
 onStart:function(evt){ //開始拖拽出發(fā)該函數(shù)
  console.log('onStart.foo:', [evt.item, evt.from]);
 },
 onSort:function(evt){ //發(fā)生排序發(fā)生該事件
  console.log('onSort.foo:', [evt.item, evt.from]);
 },
 onEnd: function(evt){ //拖拽完畢之后發(fā)生該事件
  console.log('onEnd.foo:', [evt.item, evt.from]); 
 }
 }); 
 
 </script> 
</body>
</html>

當(dāng)然也支持克隆從a列表可克隆dom節(jié)點(diǎn)拖拽添加到b倆表只要把參數(shù) pull: 'clone', 這樣就可以了 dome

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>無標(biāo)題文檔</title>
 </head>
 <link href="app.css" rel="stylesheet" type="text/css"/>
 <script src="Sortable.js"></script>
 <body>
 <div class="container" style="height: 520px">
 <div data-force="30" class="layer block" style="left: 14.5%; top: 0; width: 37%">
 <div class="layer title">List A</div>
 <ul id="foo" class="block__list block__list_words">
 <li>бегемот</li>
 <li>корм</li>
 <li>антон</li> 
 <li>сало</li>
 <li>железосталь</li>
 <li>валик</li>
 <li>кровать</li>
 <li>краб</li>
 </ul>
 </div>
 
 
 
 <div data-force="18" class="layer block" style="left: 58%; top: 143px; width: 40%;">
 <div class="layer title">List B</div>
 <ul id="bar" class="block__list block__list_tags">
 <li>казнить</li>
 <li>,</li>
 <li>нельзя</li
 ><li>помиловать</li>
 </ul>
 </div>
 </div>
 
 <script>
 
 Sortable.create(document.getElementById('foo'), {
 group: {
  name:"words",
  pull: 'clone',
  put: true 
  },
  animation: 150, //動(dòng)畫參數(shù)
  onAdd: function (evt){ //拖拽時(shí)候添加有新的節(jié)點(diǎn)的時(shí)候發(fā)生該事件
  console.log('onAdd.foo:', [evt.item, evt.from]); 
  },
 onUpdate: function (evt){ //拖拽更新節(jié)點(diǎn)位置發(fā)生該事件
  console.log('onUpdate.foo:', [evt.item, evt.from]); 
  },
  onRemove: function (evt){ //刪除拖拽節(jié)點(diǎn)的時(shí)候促發(fā)該事件
  console.log('onRemove.foo:', [evt.item, evt.from]); 
  },
  onStart:function(evt){ //開始拖拽出發(fā)該函數(shù)
  console.log('onStart.foo:', [evt.item, evt.from]);
  },
  onSort:function(evt){ //發(fā)生排序發(fā)生該事件
  console.log('onSort.foo:', [evt.item, evt.from]);
  },
  onEnd: function(evt){ //拖拽完畢之后發(fā)生該事件
  console.log('onEnd.foo:', [evt.item, evt.from]); 
  }
 });
 
 
 Sortable.create(document.getElementById('bar'), {
  group: {
  name:"words",
  pull: false,
  put: true 
  },
  animation: 150, //動(dòng)畫參數(shù)
 onAdd: function (evt){ //拖拽時(shí)候添加有新的節(jié)點(diǎn)的時(shí)候發(fā)生該事件
  console.log('onAdd.foo:', [evt.item, evt.from]); 
 },
  onUpdate: function (evt){ //拖拽更新節(jié)點(diǎn)位置發(fā)生該事件
  console.log('onUpdate.foo:', [evt.item, evt.from]); 
  },
 onRemove: function (evt){ //刪除拖拽節(jié)點(diǎn)的時(shí)候促發(fā)該事件
  console.log('onRemove.foo:', [evt.item, evt.from]); 
  },
  onStart:function(evt){ //開始拖拽出發(fā)該函數(shù)
  console.log('onStart.foo:', [evt.item, evt.from]);
 },
 onSort:function(evt){ //發(fā)生排序發(fā)生該事件
  console.log('onSort.foo:', [evt.item, evt.from]);
  },
 onEnd: function(evt){ //拖拽完畢之后發(fā)生該事件
  console.log('onEnd.foo:', [evt.item, evt.from]); 
 }
 }); 
 </script> 
 </body>
 </html>

該插件也支持刪除拖拽列表的節(jié)點(diǎn)，主要是設(shè)置filter 參數(shù)，改參數(shù)可以設(shè)置成函數(shù)，但是設(shè)置成函數(shù)的時(shí)候不還要自己定義拖拽，顯得有些麻煩，所以一般設(shè)置成class，或者是tag，設(shè)置成class和tag的時(shí)候就是做拖拽列表中含有calss，tag的節(jié)點(diǎn)可以點(diǎn)擊的時(shí)候可以觸發(fā)onFilter函數(shù)，觸發(fā)會(huì)傳遞一個(gè)evt參數(shù)進(jìn)來evt.item 就是class或者tag的dom節(jié)點(diǎn)，可以通過他們的血緣關(guān)系從而刪除需要?jiǎng)h除的節(jié)點(diǎn)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>無標(biāo)題文檔</title>
 </head>
 <link href="st/app.css" rel="stylesheet" type="text/css"/>
 <script src="Sortable3.js"></script>
 <body>
 
 <body>
 <!-- Editable list -->
 <a name="e"></a>
 <div class="container" style="margin-top: 100px">
 <div id="filter" style="margin-left: 30px">
 <div><div data-force="5" class="layer title title_xl">Editable list</div></div>
 
 <div style="margin-top: -8px; margin-left: 10px" class="block__list block__list_words">
 <ul id="editable">
 <li>Оля<i class="js-remove">✖</i></li>
 <li>Владимир<i class="js-remove">✖</i></li>
 <li>Алина<i class="js-remove">✖</i></li>
 </ul>
 
 
 </div>
 </div>
 </div>
 <script>
 // Editable list
 var editableList = Sortable.create(document.getElementById('editable'), {
 animation: 150,
 filter: '.js-remove',
 onFilter: function (evt) {
 console.log(evt.item)
 evt.item.parentNode.parentNode.removeChild(evt.item.parentNode);
 }
 });

 </script>
 </body>
 </html>

Sortable.js 接口參數(shù)還有很多個(gè)，不一一做dome了列出來給大家看看，其中比較常用的是上面所說的dome參數(shù)，還有handle這個(gè)參數(shù)也常用規(guī)定哪些calss，或者tag拖拽。

var defaults = {
 group: Math.random(), //產(chǎn)生一個(gè)隨機(jī)數(shù) //產(chǎn)生一個(gè)隨機(jī)數(shù) //改參數(shù)是對(duì)象有三個(gè)兩個(gè)參數(shù) pull: 拉, put:放 默認(rèn)都是是true pull還有一個(gè)值是: 'clone', pull: 拉, put:放 設(shè)置為false 就不能拖拽了， 如果 pull 這種為'clone'則可以重一個(gè)列表中拖拽到另一個(gè)列表并且克隆dom節(jié)點(diǎn)， name：是兩個(gè)或者多個(gè)列表拖拽之間的通信，如果name相同則他們可以互相拖拽
 
 sort: true, // 類型：Boolean,分類 false時(shí)候在自己的拖拽區(qū)域不能拖拽，但是可以拖拽到其他區(qū)域，true則可以做自己區(qū)域拖拽或者其他授權(quán)地方拖拽
 disabled: false, //類型：Boolean 是否禁用拖拽 true 則不能拖拽 默認(rèn)是true
 store: null, // 用來html5 存儲(chǔ)的 改返回 拖拽的節(jié)點(diǎn)的唯一id
 handle: null, //handle 這個(gè)參數(shù)是設(shè)置該標(biāo)簽，或者該class可以拖拽 但是不要設(shè)置 id的節(jié)點(diǎn)和子節(jié)點(diǎn)相同的tag不然會(huì)有bug
 scroll: true, //類型：Boolean，設(shè)置拖拽的時(shí)候滾動(dòng)條是否智能滾動(dòng)。默認(rèn)為真，則智能滾動(dòng)，false則不智能滾動(dòng)
 scrollSensitivity: 30, //滾動(dòng)的靈敏度,其實(shí)是拖拽離滾動(dòng)邊界的距離觸發(fā)事件的距離邊界+-30px的地方觸發(fā)拖拽滾動(dòng)事件，
 scrollSpeed: 10, //滾動(dòng)速度
 draggable: /[uo]l/i.test(el.nodeName) ? 'li' : '>*',//draggable 判斷拖拽節(jié)點(diǎn)的父層是否是ou ul
 ghostClass: 'sortable-ghost', // 排序鏡像class,就是當(dāng)鼠標(biāo)拉起拖拽節(jié)點(diǎn)的時(shí)候添加該class
 chosenClass: 'sortable-chosen', // //為拖拽的節(jié)點(diǎn)添加一個(gè)class 開始拖拽鼠標(biāo)按下去的時(shí)候 添加該class
 ignore: 'a, img', //a 或者是img
 filter: null, //改參數(shù)可以傳遞一個(gè)函數(shù)，或者字符串，字符串可以是class或者tag，然后用于觸發(fā)oFilter函數(shù)，這樣可以用來自定義事件等
 animation: 0, //拖拽動(dòng)畫時(shí)間戳
 setData: function (dataTransfer, dragEl) { //設(shè)置拖拽傳遞的參數(shù)
 dataTransfer.setData('Text', dragEl.textContent);
 },
 dropBubble: false, // 發(fā)生 drop事件 拖拽的時(shí)候是否阻止事件冒泡 
 dragoverBubble: false, //發(fā)生 dragover 事件 拖拽的時(shí)候是否阻止事件冒泡 
 dataIdAttr: 'data-id', //拖拽元素的id 數(shù)組
 delay: 0, //延遲拖拽時(shí)間, 其實(shí)就是鼠標(biāo)按下去拖拽延遲
 forceFallback: false, // 不詳
 fallbackClass: 'sortable-fallback', // 排序回退class
 fallbackOnBody: false,// 是否把拖拽鏡像節(jié)點(diǎn)ghostEl放到body上
 };

下面是Sortable.js插件源碼，本人花了一些時(shí)間做了注釋，有興趣的朋友可以研究下。

如果您發(fā)現(xiàn)哪些地方有錯(cuò)誤注釋可以聯(lián)系我的郵箱281113270@qq.com ；

/**!
 * Sortable
 * @author RubaXa <trash@rubaxa.org>
 * @license MIT
 */


(function (factory) {
 
 "use strict"; //嚴(yán)格模式

 if (typeof define === "function" && define.amd) { //兼容 require.js 寫法
 define(factory);
 }
 else if (typeof module != "undefined" && typeof module.exports != "undefined") { //兼容node寫法
 module.exports = factory();
 }
 else if (typeof Package !== "undefined") {
 Sortable = factory(); // export for Meteor.js 兼容 Meteor.js 寫法
 }
 else {
 /* jshint sub:true */
 window["Sortable"] = factory(); //把它掛載在window下
 
 
 }
})(function () {
 "use strict";
 
 if (typeof window == "undefined" || typeof window.document == "undefined") { //判斷該js是否在window或者document 下運(yùn)行
 return function () {
 throw new Error("Sortable.js requires a window with a document"); //如果不是則拋出一個(gè)錯(cuò)誤
 };
 }
var i=0;
 var dragEl, //當(dāng)前拖拽節(jié)點(diǎn),開始拖拽節(jié)點(diǎn)，鼠標(biāo)按下去的節(jié)點(diǎn)
 parentEl,
 ghostEl, // 拖拽鏡像節(jié)點(diǎn)
 cloneEl, //克隆節(jié)點(diǎn)
 rootEl, //鼠標(biāo)開始按下去拖拽的根節(jié)點(diǎn)
 nextEl, //下一個(gè)節(jié)點(diǎn)

 scrollEl,//滾動(dòng)節(jié)點(diǎn)
 scrollParentEl, //滾動(dòng)的父節(jié)點(diǎn)

 lastEl, //根節(jié)點(diǎn)中的最后一個(gè)自己點(diǎn)
 lastCSS,
 lastParentCSS,

 oldIndex, //開始拖拽節(jié)點(diǎn)的索引 就是鼠標(biāo)按下去拖拽節(jié)點(diǎn)的索引
 newIndex, //拖拽完之后現(xiàn)在節(jié)點(diǎn)
 

 activeGroup,
 autoScroll = {}, //滾動(dòng)對(duì)象用于存鼠標(biāo)的xy軸
/*
tapEvt 觸摸對(duì)象包括x與y軸與拖拽當(dāng)前節(jié)點(diǎn)
tapEvt = {
 target: dragEl,
 clientX: touch.clientX,
 clientY: touch.clientY
 };
 */
 tapEvt, 
 touchEvt,

 moved,

 /** @const */
 RSPACE = /\s+/g, //全局匹配空格

 expando = 'Sortable' + (new Date).getTime(), //字符串Sortable+時(shí)間戳

 win = window, //縮寫win
 document = win.document,
 parseInt = win.parseInt;
 //draggable html5 拖拽屬性 初始化的時(shí)候是true
 
 
 var supportDraggable = !!('draggable' in document.createElement('div')),
 //判斷瀏覽器是否支持css3 這個(gè)屬性pointer-events
 supportCssPointerEvents = (function (el) {
 el = document.createElement('x');
 el.style.cssText = 'pointer-events:auto';
 return el.style.pointerEvents === 'auto';
 })(),

 _silent = false, //默認(rèn)

 abs = Math.abs,
 slice = [].slice,

 touchDragOverListeners = [], //新建一個(gè)數(shù)組 鼠標(biāo)觸摸拖拽數(shù)組
 //_autoScroll 相當(dāng)于 被一個(gè)函數(shù)付值
 
/* _autoScroll = function(callback,ms){
 var args,
 _this;
 if (args === void 0) {
 args = arguments;
 _this = this;

 setTimeout(function () {
 if (args.length === 1) {
 callback.call(_this, args[0]);
 } else {
 callback.apply(_this, args);
 }

 args = void 0;
 }, ms);
 }
 其實(shí)就是_autoScroll=function(參數(shù)){
 放到 _throttle 的回調(diào)函數(shù)中 function (/參數(shù)/) 
 }
 }*/
 
 
 
 
 /***********************************************************************************************
 *函數(shù)名 ：_autoScroll
 *函數(shù)功能描述 ： 拖拽智能滾動(dòng)
 *函數(shù)參數(shù) ： 
 evt：
 類型：boj, 事件對(duì)象
 options：類型：obj， 參數(shù)類
 rootEl：類型：obj dom節(jié)點(diǎn)，拖拽的目標(biāo)節(jié)點(diǎn) 
 *函數(shù)返回值 ： viod
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/
 _autoScroll = _throttle(
 //回調(diào)函數(shù)
 function (/**Event*/evt, /**Object*/options, /**HTMLElement*/rootEl) {
 //每次拖拽只會(huì)調(diào)用一次該函數(shù)
 
 
 //evt 是事件對(duì)象 event
 //options.scroll如果為真 并且rootEl 為真的時(shí)候
 // Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=505521
 if (rootEl && options.scroll) {
 var el,
 rect,
 sens = options.scrollSensitivity, //滾動(dòng)靈敏度 默認(rèn)是30
 speed = options.scrollSpeed, //滾動(dòng)速度 默認(rèn)是10
 x = evt.clientX, //獲取鼠標(biāo)在可視窗口的x值
 y = evt.clientY, //獲取鼠標(biāo)在可視窗口的y值
 
 winWidth = window.innerWidth, //獲取可視窗口的高度和寬度 有兼容性問題 不包括滾動(dòng)條
 winHeight = window.innerHeight,
 
 vx,
 vy
 ;

 // Delect scrollEl 觀察滾動(dòng)節(jié)點(diǎn) 如果滾動(dòng)的父節(jié)點(diǎn)scrollParentEl不等于當(dāng)前的根節(jié)點(diǎn)的時(shí)候則 可以滾動(dòng)
 if (scrollParentEl !== rootEl) {
 scrollEl = options.scroll; //true 布爾值
 scrollParentEl = rootEl; //鼠標(biāo)開始按下的根節(jié)點(diǎn)

 if (scrollEl === true) {
 scrollEl = rootEl;
 do {
 //判斷父節(jié)點(diǎn)，哪個(gè)父節(jié)點(diǎn)出現(xiàn)滾動(dòng)條，如果有滾動(dòng)條則設(shè)置改拖拽的節(jié)點(diǎn)滾動(dòng)條父節(jié)點(diǎn)
 if ((scrollEl.offsetWidth < scrollEl.scrollWidth) ||
 (scrollEl.offsetHeight < scrollEl.scrollHeight)
 ) {
 break;
 }
 /* jshint boss:true */
 } while (scrollEl = scrollEl.parentNode);
 }
 }
 

 if (scrollEl) {
 el = scrollEl;
 rect = scrollEl.getBoundingClientRect();
 /* 
 var box=document.getElementById('box'); // 獲取元素
 alert(box.getBoundingClientRect().top); // 元素上邊距離頁面上邊的距離
 alert(box.getBoundingClientRect().right); // 元素右邊距離頁面左邊的距離
 alert(box.getBoundingClientRect().bottom); // 元素下邊距離頁面上邊的距離
 alert(box.getBoundingClientRect().left); // 元素左邊距離頁面左邊的距離
 y：y = evt.clientY, //獲取鼠標(biāo)在可視窗口的y值
 sens： sens = options.scrollSensitivity, //滾動(dòng)靈敏度 默認(rèn)是30
 
 */
 
 //vx 與 vy 只是個(gè)布爾值判斷 然后就得出一個(gè)值
 /*
 true-true=0
 true-false=1
 false-false=0
 false-true=-1
 */
 vx = (abs(rect.right - x) <= sens) - (abs(rect.left - x) <= sens);
 vy = (abs(rect.bottom - y) <= sens) - (abs(rect.top - y) <= sens); //這樣判斷并不是很好因?yàn)橹粫?huì)在邊界判斷事件發(fā)生，如果一開始拖拽快速超過了設(shè)置的+-sens值滾動(dòng)事件將沒有發(fā)生。個(gè)人感覺改成一下判斷會(huì)比較好。
 /*
 if(rect.top+sens-y>=0){
 vy=-1;
 } else if(rect.bottom+sens-y<=0){
 vy=1;
 }else{
 vy=0;
 }
 */
 }

 
 if (!(vx || vy)) { //當(dāng)他等于0的時(shí)候 拖拽滾動(dòng)的是window
 
 vx = (winWidth - x <= sens) - (x <= sens);
 vy = (winHeight - y <= sens) - (y <= sens);

 /* jshint expr:true */
 (vx || vy) && (el = win);
 }


 if (autoScroll.vx !== vx || autoScroll.vy !== vy || autoScroll.el !== el) {
 autoScroll.el = el;
 autoScroll.vx = vx;
 autoScroll.vy = vy;
 //speed=10 滾動(dòng)速度
 clearInterval(autoScroll.pid);
 
 if (el) {
 autoScroll.pid = setInterval(function () {
 if (el === win) {
 win.scrollTo(win.pageXOffset + vx * speed, win.pageYOffset + vy * speed);
 } else {
 vy && (el.scrollTop += vy * speed); //設(shè)置元素滾動(dòng)條的位置,每次滾動(dòng)1*speed如果是0 則不會(huì)滾動(dòng)
 vx && (el.scrollLeft += vx * speed);//設(shè)置元素滾動(dòng)條的位置
 }
 }, 
 24);
 }
 }
 }
 //時(shí)間 毫秒
 }, 30),
 /***********************************************************************************************
 *函數(shù)名 ：_prepareGroup
 *函數(shù)功能描述 ： //options.group 屬性變成對(duì)象 。如果group不是對(duì)象則變成對(duì)象，并且group對(duì)象的name就等于改group的值 并且添加多['pull', 'put'] 屬性默認(rèn)值是true
 如果設(shè)置group{
 pull:true, 則可以拖拽到其他列表 否則反之
 put:true, 則可以從其他列表中放數(shù)據(jù)到改列表，false則反之
 }
 pull: 'clone', 還有一個(gè)作用是克隆，就是當(dāng)這個(gè)列表拖拽到其他列表的時(shí)候不會(huì)刪除改列表的節(jié)點(diǎn)。
 *函數(shù)參數(shù) ： 
 options：
 類型：boj, options 拖拽參數(shù)
 
 *函數(shù)返回值 ： viod
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/


 _prepareGroup = function (options) {
 
 var group = options.group; //把options.group 付值給group
 // 先判斷他group 是否是對(duì)象，如果不是則變成對(duì)象，name是他的屬性
 if (!group || typeof group != 'object') { //如果當(dāng)前options.group; 不存在或者不是obj則把他變成一個(gè)對(duì)象
 group = options.group = {name: group};
 }
 //判斷有沒有設(shè)置 'pull', 'put' 如果沒有 則添加 'pull', 'put' 屬性并且設(shè)置為真
 ['pull', 'put'].forEach(function (key) {
 if (!(key in group)) { //
 group[key] = true; //將為group對(duì)象添加兩個(gè)屬性'pull', 'put' 并且為true
 }
 });
 //options.group 變成對(duì)象之后join方法將匹配不到任何東西
 //如果他直接是數(shù)組的話這里就是把數(shù)組的值拆分成字符串連接起來
 //options.group 屬性變成對(duì)象 。
 options.groups = ' ' + group.name + (group.put.join ? ' ' + group.put.join(' ') : '') + ' ';
 }
 ;


 /**
 * @class Sortable
 * @param {HTMLElement} el
 * @param {Object} [options]
 */
 //el html dom節(jié)點(diǎn)
 //param obj 數(shù)據(jù)對(duì)象
 
 /***********************************************************************************************
 *函數(shù)名 ：Sortable
 *函數(shù)功能描述 ： 主類，里面包含很多方法
 *函數(shù)參數(shù) ： dom節(jié)點(diǎn)rootEl 
 *函數(shù)返回值 ：
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/ 
 function Sortable(el, options) {
 //判斷 param 如果不是HTMLDOM 則拋出錯(cuò)誤
 if (!(el && el.nodeType && el.nodeType === 1)) {
 throw 'Sortable: `el` must be HTMLElement, and not ' + {}.toString.call(el);
 }
 //把dom節(jié)點(diǎn)存到this中 好操作 就是id 父層節(jié)點(diǎn)
 this.el = el; // root element
 this.options = options = _extend({}, options); //把options初始化的數(shù)據(jù)存到this中 好操作


 // Export instance
 //把 Sortable 類放在HTMLDOM節(jié)點(diǎn)的expando屬性中
 el[expando] = this;


 // Default options
 //初始化 defaults 數(shù)據(jù)
 var defaults = {
 group: Math.random(), //產(chǎn)生一個(gè)隨機(jī)數(shù) //產(chǎn)生一個(gè)隨機(jī)數(shù) //改參數(shù)是對(duì)象有三個(gè)兩個(gè)參數(shù) pull: 拉, put:放 默認(rèn)都是是true pull還有一個(gè)值是: 'clone', pull: 拉, put:放 設(shè)置為false 就不能拖拽了， 如果 pull 這種為'clone'則可以重一個(gè)列表中拖拽到另一個(gè)列表并且克隆dom節(jié)點(diǎn)， name：是兩個(gè)或者多個(gè)列表拖拽之間的通信，如果name相同則他們可以互相拖拽
 
 sort: true, // 類型：Boolean,分類 false時(shí)候在自己的拖拽區(qū)域不能拖拽，但是可以拖拽到其他區(qū)域，true則可以做自己區(qū)域拖拽或者其他授權(quán)地方拖拽
 disabled: false, //類型：Boolean 是否禁用拖拽 true 則不能拖拽 默認(rèn)是true
 store: null, // 用來html5 存儲(chǔ)的 改返回 拖拽的節(jié)點(diǎn)的唯一id
 handle: null, //handle 這個(gè)參數(shù)是設(shè)置該標(biāo)簽，或者該class可以拖拽 但是不要設(shè)置 id的節(jié)點(diǎn)和子節(jié)點(diǎn)相同的tag不然會(huì)有bug
 scroll: true, //類型：Boolean，設(shè)置拖拽的時(shí)候滾動(dòng)條是否智能滾動(dòng)。默認(rèn)為真，則智能滾動(dòng)，false則不智能滾動(dòng)
 scrollSensitivity: 30, //滾動(dòng)的靈敏度,其實(shí)是拖拽離滾動(dòng)邊界的距離觸發(fā)事件的距離邊界+-30px的地方觸發(fā)拖拽滾動(dòng)事件，
 scrollSpeed: 10, //滾動(dòng)速度
 draggable: /[uo]l/i.test(el.nodeName) ? 'li' : '>*',//draggable 判斷拖拽節(jié)點(diǎn)的父層是否是ou ul
 ghostClass: 'sortable-ghost', // 排序鏡像class,就是當(dāng)鼠標(biāo)拉起拖拽節(jié)點(diǎn)的時(shí)候添加該class
 chosenClass: 'sortable-chosen', // //為拖拽的節(jié)點(diǎn)添加一個(gè)class 開始拖拽鼠標(biāo)按下去的時(shí)候 添加該class
 ignore: 'a, img', //a 或者是img
 filter: null, //改參數(shù)可以傳遞一個(gè)函數(shù)，或者字符串，字符串可以是class或者tag，然后用于觸發(fā)oFilter函數(shù)，這樣可以用來自定義事件等
 animation: 0, //拖拽動(dòng)畫時(shí)間戳
 setData: function (dataTransfer, dragEl) { //設(shè)置拖拽傳遞的參數(shù)
 dataTransfer.setData('Text', dragEl.textContent);
 },
 dropBubble: false, // 發(fā)生 drop事件 拖拽的時(shí)候是否阻止事件冒泡 
 dragoverBubble: false, //發(fā)生 dragover 事件 拖拽的時(shí)候是否阻止事件冒泡 
 dataIdAttr: 'data-id', //拖拽元素的id 數(shù)組
 delay: 0, //延遲拖拽時(shí)間, 其實(shí)就是鼠標(biāo)按下去拖拽延遲
 forceFallback: false, // 不詳
 fallbackClass: 'sortable-fallback', // 排序回退class
 fallbackOnBody: false,// 是否把拖拽鏡像節(jié)點(diǎn)ghostEl放到body上
 };


 // Set default options
 //當(dāng)options類中的數(shù)據(jù)沒有defaults類中的數(shù)據(jù)的時(shí)候 就把defaults類中的數(shù)據(jù)賦值給options類
 for (var name in defaults) {
 !(name in options) && (options[name] = defaults[name]);
 }
 //把group: 變成一個(gè)對(duì)象，本來是一個(gè)屬性的
 _prepareGroup(options);
 
 

 // Bind all private methods
 for (var fn in this) {
 if (fn.charAt(0) === '_') {
 //如果這個(gè) Sortable 類下的函數(shù) 開始字符串還有_下劃線的就把他的this指向Sortable類
 this[fn] = this[fn].bind(this);
 }
 }

 // Setup drag mode
 //forceFallback 如果是false 那么給supportDraggable 函數(shù)他，然后判斷瀏覽器是否支持draggable 拖拽如果支持是true 否則是false
 this.nativeDraggable = options.forceFallback ? false : supportDraggable;
 
 
 // Bind events
 //添加事件 // 入口從這里開始
 
 _on(el, 'mousedown', this._onTapStart);
 _on(el, 'touchstart', this._onTapStart);
 
 
 //html5 dragover 添加拖拽事件
 if (this.nativeDraggable) {
 //傳遞整個(gè)類進(jìn)去
 _on(el, 'dragover', this); //然后會(huì)執(zhí)行這個(gè)函數(shù)handleEvent
 _on(el, 'dragenter', this); //然后會(huì)執(zhí)行這個(gè)函數(shù)handleEvent
 }
 
 //touchDragOverListeners 添加一個(gè)false 數(shù)據(jù)到數(shù)組里。
 touchDragOverListeners.push(this._onDragOver);

 // Restore sorting
 //sort 排序函數(shù)
 //store 是null 未找到get函數(shù)不知道怎么回事 可能它是屬于store.js的api
 options.store && this.sort(options.store.get(this));
 }
/***********************************************************************************************
 *函數(shù)名 ：Sortable.prototype 
 *函數(shù)功能描述 ： 主類，的原型
 *函數(shù)參數(shù) ： 
 *函數(shù)返回值 ：
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/

 Sortable.prototype = /** @lends Sortable.prototype */ {
 constructor: Sortable, //防止繼承混亂，構(gòu)造方法指向他的構(gòu)造函數(shù)
/***********************************************************************************************
 *函數(shù)名 ：_onTapStart
 *函數(shù)功能描述 ： 鼠標(biāo)按下去函數(shù),oldIndex統(tǒng)計(jì)目標(biāo)節(jié)點(diǎn)與同級(jí)同胞的上節(jié)點(diǎn)總和
 *函數(shù)參數(shù) ： viod
 *函數(shù)返回值 ： 無
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/

 _onTapStart: function (/** Event|TouchEvent */evt) {
 
 var _this = this,
 el = this.el, //id dom節(jié)點(diǎn)
 options = this.options, //參數(shù)類
 type = evt.type, //事件類型
 touch = evt.touches && evt.touches[0], //觸摸屏事件
 target = (touch || evt).target, //目標(biāo)節(jié)點(diǎn)
 originalTarget = target, 
 filter = options.filter; // null

 //如果是鼠標(biāo)按下去事件，但是如果不是左鍵按下去的話，或者disabled 為假的時(shí)候 結(jié)束該程序 disabled 為fasle
 if (type === 'mousedown' && evt.button !== 0 || options.disabled) {
 return; // only left button or enabled
 }
 //draggable=/[uo]l/i.test(el.nodeName) ? 'li' : '>*',
 // target=el
 // target = _closest(target, options.draggable, el); //true
 // 
 if (!target) {
 return;
 }

 // get the index of the dragged element within its parent
 //獲取索引
 oldIndex = _index(target, options.draggable);
 
 // Check filter+
 //filter 如果是函數(shù) 但是默認(rèn)值filter 
 if (typeof filter === 'function') {
 if (filter.call(this, evt, target, this)) { //并且有返回值是true 的話
 
 //觸發(fā)該函數(shù)
 _dispatchEvent(_this, originalTarget, 'filter', target, el, oldIndex); //則觸發(fā)oFilter事件
 evt.preventDefault(); //停止默認(rèn)事件
 return; // cancel dnd
 }
 }
 else if (filter) {
 //// JavaScript數(shù)組some()方法測(cè)試數(shù)組中的某個(gè)元素是否通過由提供的功能來實(shí)現(xiàn)測(cè)試 ,只要有一個(gè)真則返回真
 /*
 例子
 if (!Array.prototype.some)
{
 Array.prototype.some = function(fun )
 {
 var len = this.length;
 if (typeof fun != "function")
 throw new TypeError();
 
 var thisp = arguments[1];
 for (var i = 0; i < len; i++)
 {
 if (i in this &&
 fun.call(thisp, this[i], i, this))
 return true;
 }
 
 return false;
 };
}
 
function isBigEnough(element, index, array) {
 return (element >= 10);
}
 
var retval = [2, 5, 8, 1, 4].some(isBigEnough);
document.write("Returned value is : " + retval );
 
var retval = [12, 5, 8, 1, 4].some(isBigEnough);
document.write("<br />Returned value is : " + retval );
 
 */
 
 filter = filter.split(',').some(function (criteria) { //如果filter是字符串，則會(huì)用split 拆分成數(shù)組并且遍歷他只有一個(gè)class 對(duì)的上則_closest 匹配tag和class 如果設(shè)置的filter中有calss 和拖拽元素上面的clss相同，或者tag相同，則會(huì)觸發(fā)oFilter函數(shù) 
 criteria = _closest(originalTarget, criteria.trim(), el);//_closest

 if (criteria) {
 _dispatchEvent(_this, criteria, 'filter', target, el, oldIndex); //調(diào)用自定義事件
 return true;
 }
 });

 if (filter) {
 evt.preventDefault();
 return; // cancel dnd
 }
 }

 //handle 存在
 //originalTarget 
 //handle 這個(gè)參數(shù)是設(shè)置該標(biāo)簽，或者該class可以拖拽 但是不要設(shè)置 id的節(jié)點(diǎn)和子節(jié)點(diǎn)相同的tag不然會(huì)有bug
 
 if (options.handle && !_closest(originalTarget, options.handle, el)) {
 return;
 }


 // Prepare `dragstart`
 // 到這里
 this._prepareDragStart(evt, touch, target);
 },


 
/***********************************************************************************************
 *函數(shù)名 ：_onTapStart
 *函數(shù)功能描述 ： 開始準(zhǔn)備拖
 *函數(shù)參數(shù) ： evt：
  類型:obj,事件對(duì)象
 touch：
  類型:obj,觸摸事件對(duì)象，判斷是否是觸摸事件還是鼠標(biāo)事件
 target： 類型:dom-obj,目標(biāo)節(jié)點(diǎn)
 *函數(shù)返回值 ： 無
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/ 
 _prepareDragStart: function (/** Event */evt, /** Touch */touch, /** HTMLElement */target) {
 //evt pc 的事件對(duì)象
 //touch 移動(dòng)的的事件對(duì)象
 //target 目標(biāo)節(jié)點(diǎn)
 var _this = this,
 el = _this.el, //id節(jié)點(diǎn)，就是父層節(jié)點(diǎn)
 options = _this.options, //參數(shù)類
 ownerDocument = el.ownerDocument, //整個(gè)文檔
 dragStartFn; //聲明開始拖拽函數(shù)
 //target 目標(biāo)節(jié)點(diǎn)存在 dragEl 當(dāng)前拖拽的節(jié)點(diǎn) 并且目標(biāo)節(jié)點(diǎn)的父節(jié)點(diǎn)是id的節(jié)點(diǎn)的時(shí)候
 if (target && !dragEl && (target.parentNode === el)) {
 tapEvt = evt; //事件對(duì)象
 rootEl = el; //拖拽的根節(jié)點(diǎn) 就是傳進(jìn)來的id那個(gè)節(jié)點(diǎn)
 
 dragEl = target; //目標(biāo)節(jié)點(diǎn) 當(dāng)前的拖拽節(jié)點(diǎn) 鼠標(biāo)按下去拖拽的節(jié)點(diǎn)
 parentEl = dragEl.parentNode; //目標(biāo)節(jié)點(diǎn) 當(dāng)前的拖拽節(jié)點(diǎn) 的父節(jié)點(diǎn) 就是 dragEl.parentNode ==rootEl
 nextEl = dragEl.nextSibling; //目標(biāo)節(jié)點(diǎn) 的下一個(gè)節(jié)點(diǎn)
 activeGroup = options.group; //Object {name: "words", pull: true, put: true}
 
 //開始拖拽函數(shù)
 dragStartFn = function () {
 // Delayed drag has been triggered 延遲拖動(dòng)已被觸發(fā)
 // we can re-enable the events: touchmove/mousemove 我們可以重新啟用touchmove / MouseMove事件：
 //解綁事件，關(guān)閉_dragStartTimer 定時(shí)器 取消dragStartFn 函數(shù)執(zhí)行
 _this._disableDelayedDrag();

 // Make the element draggable 使元件拖動(dòng)
 //把當(dāng)前的拖拽節(jié)點(diǎn)的draggable 屬性設(shè)置為真，讓他支持html5拖拽事件
 dragEl.draggable = true;

 // Chosen item dragEl 目標(biāo)節(jié)點(diǎn) 類 _this.options.chosenClass='sortable-chosen'
 //為拖拽的節(jié)點(diǎn)添加一個(gè)class
 _toggleClass(dragEl, _this.options.chosenClass, true);

 // Bind the events: dragstart/dragend 綁定事件拖曳開始dragend
 _this._triggerDragStart(touch);
 };

 // Disable "draggable" ignore="a, img"
 options.ignore.split(',').forEach(function (criteria) {
 // criteria 遍歷數(shù)組的當(dāng)前target
 
 //criteria.trim() 去除空格
 /*
 el.draggable //html5拖拽屬性
 function _disableDraggable(el) {
 el.draggable = false;
 } 
 
 */
 // 該函數(shù)功能是把當(dāng)前拖拽對(duì)象的a和img節(jié)點(diǎn)的html5 拖拽屬性改為false
 _find(dragEl, criteria.trim(), _disableDraggable);
 });
 
 _on(ownerDocument, 'mouseup', _this._onDrop); //在ownerDocument 文檔上面當(dāng)發(fā)生鼠標(biāo)抬起的時(shí)候，添加_onDrop函數(shù)
 _on(ownerDocument, 'touchend', _this._onDrop);//在ownerDocument 文檔上面當(dāng)發(fā)生觸摸抬起的時(shí)候，添加_onDrop函數(shù)
 _on(ownerDocument, 'touchcancel', _this._onDrop);//在ownerDocument 文檔上面當(dāng)發(fā)生觸摸劃過抬起的時(shí)候，解綁_onDrop函數(shù)
 //delay 初始值為0
 if (options.delay) {
 /*
 這里里面的程序塊添加了事件只有調(diào)用_disableDelayedDrag，添加了一個(gè)定時(shí)器執(zhí)行一次dragStartFn函數(shù)，這個(gè)函數(shù)又馬上解綁_disableDelayedDrag事件，關(guān)閉定時(shí)器，整個(gè)思路是只讓程序發(fā)生一次，并且馬上解綁事件,銷毀該事件。這樣思維有些特別
 */
 
 // If the user moves the pointer or let go the click or touch 如果用戶移動(dòng)指針或單擊“單擊”或“觸摸”
 // before the delay has been reached: //之前的延遲已達(dá)到
 // disable the delayed drag //禁用延遲拖動(dòng)
 _on(ownerDocument, 'mouseup', _this._disableDelayedDrag); //當(dāng)鼠標(biāo)抬起的時(shí)候在文檔上添加_disableDelayedDrag事件
 _on(ownerDocument, 'touchend', _this._disableDelayedDrag); //觸摸抬起的時(shí)候在文檔上添加_disableDelayedDrag事件
 _on(ownerDocument, 'touchcancel', _this._disableDelayedDrag); //觸摸劃過抬起的時(shí)候在文檔上添加_disableDelayedDrag事件
 _on(ownerDocument, 'mousemove', _this._disableDelayedDrag); //當(dāng)鼠標(biāo)移動(dòng)mousemove的時(shí)候在文檔上添加_disableDelayedDrag事件
 _on(ownerDocument, 'touchmove', _this._disableDelayedDrag); //觸摸移動(dòng)的時(shí)候在文檔上添加_disableDelayedDrag事件

 _this._dragStartTimer = setTimeout(dragStartFn, options.delay); //執(zhí)行dragStartFn函數(shù)
 } else {
 //開始拖拽
 dragStartFn();
 }
 }
 },
 
 /***********************************************************************************************
 *函數(shù)名 ：_disableDelayedDrag
 *函數(shù)功能描述 ： 禁用延遲拖拽 當(dāng)拖拽延時(shí)的時(shí)候，把所有事件解綁，并且關(guān)閉定時(shí)器。
 *函數(shù)參數(shù) ：
 *函數(shù)返回值 ：
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/
 _disableDelayedDrag: function () {
 var ownerDocument = this.el.ownerDocument;

 clearTimeout(this._dragStartTimer); //關(guān)閉定時(shí)器
 _off(ownerDocument, 'mouseup', this._disableDelayedDrag);//當(dāng)鼠標(biāo)抬起的時(shí)候在文檔上解綁_disableDelayedDrag事件
 
 _off(ownerDocument, 'touchend', this._disableDelayedDrag);//觸摸抬起的時(shí)候在文檔上解綁_disableDelayedDrag事件
 _off(ownerDocument, 'touchcancel', this._disableDelayedDrag);//當(dāng)觸摸劃過抬起的時(shí)候在文檔上解綁_disableDelayedDrag事件
 _off(ownerDocument, 'mousemove', this._disableDelayedDrag);//當(dāng)鼠移動(dòng)起的時(shí)候在文檔上解綁_disableDelayedDrag事件
 _off(ownerDocument, 'touchmove', this._disableDelayedDrag);//觸摸的時(shí)候在文檔上解綁_disableDelayedDrag事件
 },
 /***********************************************************************************************
 *函數(shù)名 ：_triggerDragStart
 *函數(shù)功能描述 ： 為拖拽前做好準(zhǔn)本，包括判斷是否是觸摸設(shè)備，或者pc，或者沒有dragend
 *函數(shù)參數(shù) ：
 *函數(shù)返回值 ：
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/
 _triggerDragStart: function (/** Touch */touch) {
 
 //按下去的值
 if (touch) {
 // Touch device support 觸摸設(shè)備支持
 tapEvt = {
 target: dragEl,
 clientX: touch.clientX,
 clientY: touch.clientY
 };

 this._onDragStart(tapEvt, 'touch'); //觸摸設(shè)備
 }
 else if (!this.nativeDraggable) {
 
 this._onDragStart(tapEvt, true); //pc設(shè)備
 }
 else {
 //如果當(dāng)前的html還沒有設(shè)置拖拽屬性則先設(shè)置拖拽屬性
 _on(dragEl, 'dragend', this); 
 _on(rootEl, 'dragstart', this._onDragStart);
 
 }

 try {
 if (document.selection) { 
 // Timeout neccessary for IE9 
 setTimeout(function () {
 document.selection.empty(); //取消選中
 }); 
 } else {
 window.getSelection().removeAllRanges();//取消選中
 }
 } catch (err) {
 
 }
 },


 _dragStarted: function () {
 if (rootEl && dragEl) { //如果鼠標(biāo)按下去的拖拽節(jié)點(diǎn)存在和拖拽的根節(jié)點(diǎn)存在
 // Apply effect
 //為拖拽節(jié)點(diǎn)添加一個(gè)class名字是'sortable-ghost'
 _toggleClass(dragEl, this.options.ghostClass, true);
 //Sortable類賦值給Sortable.active 屬性
 Sortable.active = this;

 // Drag start event
 
 //開始拖拽 并且會(huì)相應(yīng)onStart 接口函數(shù)
 _dispatchEvent(this, rootEl, 'start', dragEl, rootEl, oldIndex);
 }
 },

 _emulateDragOver: function () {
 
 if (touchEvt) {
 if (this._lastX === touchEvt.clientX && this._lastY === touchEvt.clientY) {
 return;
 }

 this._lastX = touchEvt.clientX;
 this._lastY = touchEvt.clientY;

 if (!supportCssPointerEvents) {
 _css(ghostEl, 'display', 'none');
 }

 var target = document.elementFromPoint(touchEvt.clientX, touchEvt.clientY),
 parent = target,
 groupName = ' ' + this.options.group.name + '',
 i = touchDragOverListeners.length;

 if (parent) {
 do {
 if (parent[expando] && parent[expando].options.groups.indexOf(groupName) > -1) {
 while (i--) {
 touchDragOverListeners[i]({
  clientX: touchEvt.clientX,
  clientY: touchEvt.clientY,
  target: target,
  rootEl: parent
 });
 }

 break;
 }

 target = parent; // store last element
 }
 /* jshint boss:true */
 while (parent = parent.parentNode);
 }

 if (!supportCssPointerEvents) {
 _css(ghostEl, 'display', '');
 }
 }
 },

/*
tapEvt = {
 target: dragEl,
 clientX: touch.clientX,
 clientY: touch.clientY
 };
*/
 /***********************************************************************************************
 *函數(shù)名 ：_onTouchMove
 *函數(shù)功能描述 ： 觸摸移動(dòng)拖拽動(dòng)畫事件ghostEl，把拖拽移動(dòng)的xy值給ghostEl節(jié)點(diǎn)
 *函數(shù)參數(shù) ： viod
 *函數(shù)返回值 ： 無
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/
 _onTouchMove: function (/**TouchEvent*/evt) {
 //evt 事件對(duì)象
 if (tapEvt) {
 // only set the status to dragging, when we are actually dragging
 if (!Sortable.active) { //Sortable.active 不存在則執(zhí)行_dragStarted函數(shù) 設(shè)置拖拽動(dòng)態(tài)
 this._dragStarted();
 }

 // as well as creating the ghost element on the document body
 // 創(chuàng)建一個(gè)ghostEl dom節(jié)點(diǎn)，并且是克隆拖拽節(jié)點(diǎn)的rootEl下面就是id那個(gè)dom節(jié)點(diǎn)，添加在，并且設(shè)置了一些屬性，高,寬，top，left，透明度，鼠標(biāo)樣式，
 this._appendGhost();
 
 var touch = evt.touches ? evt.touches[0] : evt, //判斷是否是觸摸事件還是pc鼠標(biāo)事件
 dx = touch.clientX - tapEvt.clientX, //鼠標(biāo)移動(dòng)的x位置減去鼠標(biāo)按下去的位置。
 dy = touch.clientY - tapEvt.clientY,//鼠標(biāo)移動(dòng)的y位置減去鼠標(biāo)按下去的位置。
 //3d 特效 x是左右，y是上下，z是放大縮小 設(shè)置3d效果
 translate3d = evt.touches ? 'translate3d(' + dx + 'px,' + dy + 'px,0)' : 'translate(' + dx + 'px,' + dy + 'px)';

 moved = true;
 touchEvt = touch; //事件對(duì)象
 
 _css(ghostEl, 'webkitTransform', translate3d); //設(shè)置3d效果
 _css(ghostEl, 'mozTransform', translate3d); //設(shè)置3d效果
 _css(ghostEl, 'msTransform', translate3d) ; //設(shè)置3d效果
 _css(ghostEl, 'transform', translate3d); //設(shè)置3d效果
 
 
 evt.preventDefault(); // 阻止默認(rèn)事件
 }
 },
 /***********************************************************************************************
 *函數(shù)名 ：_appendGhost
 *函數(shù)功能描述 ： 創(chuàng)建一個(gè)ghostEl dom節(jié)點(diǎn)，并且是克隆拖拽節(jié)點(diǎn)的rootEl下面就是id那個(gè)dom節(jié)點(diǎn)，添加在，并且設(shè)置了一些屬性，高,寬，top，left，透明度，鼠標(biāo)樣式，
 *函數(shù)參數(shù) ： viod
 *函數(shù)返回值 ： 無
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/
 _appendGhost: function () {
 
 if (!ghostEl) { // 如果ghostEl 是空的，或者是假，或者是undefined，或者是0，則執(zhí)行下面程序
 /*getBoundingClientRect()
 其實(shí)跟 o_dom.getBoundingClientRect().left= o_dom.offsetLeft; 他們值相等
 這個(gè)方法返回一個(gè)矩形對(duì)象，包含四個(gè)屬性：left、top、right和bottom。分別表示元素各邊與頁面上邊和左邊的距離。
 */
 var rect = dragEl.getBoundingClientRect(), 
 css = _css(dragEl), //返回當(dāng)前obj 所有的style的屬性
 options = this.options, //this.options 參數(shù)
 ghostRect; //一個(gè)空變量

 ghostEl = dragEl.cloneNode(true); //克隆dragEl 當(dāng)前拖拽的節(jié)點(diǎn)
 //options.ghostClass='sortable-ghost'
 _toggleClass(ghostEl, options.ghostClass, false);
 //fallbackClass= 'sortable-fallback
 _toggleClass(ghostEl, options.fallbackClass, true);
 
 //給新創(chuàng)建的節(jié)點(diǎn)的left和top和該節(jié)點(diǎn)的left和top值相等，所以要減去marginTop，marginLeft
 _css(ghostEl, 'top', rect.top - parseInt(css.marginTop, 10));
 _css(ghostEl, 'left', rect.left - parseInt(css.marginLeft, 10));
 
 _css(ghostEl, 'width', rect.width); //寬和高和拖拽節(jié)點(diǎn)相同
 _css(ghostEl, 'height', rect.height);
 _css(ghostEl, 'opacity', '0.8'); //透明度為0.8
 _css(ghostEl, 'position', 'fixed'); // 固定定位
 _css(ghostEl, 'zIndex', '100000'); //層為100000
 _css(ghostEl, 'pointerEvents', 'none'); //pointer-events:none顧名思意，就是鼠標(biāo)事件拜拜的意思。元素應(yīng)用了該CSS屬性，鏈接啊，點(diǎn)擊啊什么的都變成了“浮云牌醬油”。
 //把ghostEl 添加到拖拽的根節(jié)點(diǎn)那 
 options.fallbackOnBody && document.body.appendChild(ghostEl) || rootEl.appendChild(ghostEl);
 
 // Fixing dimensions. 固定尺寸 但是我覺這樣寫多此一舉，因?yàn)樯厦嬉呀?jīng)設(shè)置高寬了，然后再乘以2，再減去一般結(jié)果還是一樣的
 ghostRect = ghostEl.getBoundingClientRect();
 _css(ghostEl, 'width', rect.width * 2 - ghostRect.width);
 _css(ghostEl, 'height', rect.height * 2 - ghostRect.height);
 
 }
 },
 /***********************************************************************************************
 *函數(shù)名 ：_onDragStart
 *函數(shù)功能描述 ： 拖拽開始 為document添加觸摸事件與鼠標(biāo)事件 
 *函數(shù)參數(shù) ：
 evt：
  類型:obj, 事件對(duì)象
 useFallback:類型：string， Boolean 值 
 *函數(shù)返回值 ：
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/

 _onDragStart: function (/**Event*/evt, /**boolean*/useFallback) {
 //html5拖拽屬性。dataTransfer對(duì)象有兩個(gè)主要的方法：getData()方法和setData()方法。
 var dataTransfer = evt.dataTransfer,
 options = this.options;
 
 //解綁文檔上面的一些事件
 this._offUpEvents();
 //Object {name: "words", pull: true, put: true} 
 //activeGroup={name: "words", pull: true, put: true} 
 if (activeGroup.pull == 'clone') { //如果 參數(shù)是clone 則可以克隆節(jié)點(diǎn)而不是拖拽節(jié)點(diǎn)過去
 cloneEl = dragEl.cloneNode(true); //cloneNode(false) 克隆復(fù)制節(jié)點(diǎn)，參數(shù)如果是false則不復(fù)制里面的html，true則會(huì)復(fù)制整個(gè)dom包括里面的html
 //設(shè)置cloneEl 節(jié)點(diǎn)隱藏
 _css(cloneEl, 'display', 'none');
 //插入加點(diǎn)，在當(dāng)前拖拽的dom節(jié)點(diǎn)前面插入一個(gè)節(jié)點(diǎn)
 rootEl.insertBefore(cloneEl, dragEl);
 }

 if (useFallback) { //如果是觸摸則添加觸摸事件
 
 if (useFallback === 'touch') {
 // Bind touch events
 //添加觸摸移動(dòng)事件
 _on(document, 'touchmove', this._onTouchMove);
 //添加觸摸抬起事件
 _on(document, 'touchend', this._onDrop);
 //添加觸摸劃過結(jié)束事件
 _on(document, 'touchcancel', this._onDrop);
 } else {
 // Old brwoser
 //pc 添加鼠標(biāo)移動(dòng)事件
 _on(document, 'mousemove', this._onTouchMove);
 //pc 添加鼠標(biāo)抬起事件
 _on(document, 'mouseup', this._onDrop);
 }
 
 this._loopId = setInterval(this._emulateDragOver, 50);
 }
 else {
 //html5拖拽屬性。dataTransfer對(duì)象有兩個(gè)主要的方法：getData()方法和setData()方法。
 if (dataTransfer) {
 dataTransfer.effectAllowed = 'move';//move ：只允許值為”move”的dropEffect。
 /*
 setData: function (dataTransfer, dragEl) { dataTransfer.setData('Text', dragEl.textContent);}
 設(shè)置拖拽時(shí)候拖拽信息
 */
 options.setData && options.setData.call(this, dataTransfer, dragEl);
 }
 
 _on(document, 'drop', this); //添加拖拽結(jié)束事件
 
 setTimeout(this._dragStarted, 0); //pc拖拽事件
 }
 },
 /***********************************************************************************************
 *函數(shù)名 ：_onDragOver
 *函數(shù)功能描述 ： 拖拽元素進(jìn)進(jìn)入拖拽區(qū)域， 判斷拖拽節(jié)點(diǎn)與拖拽碰撞的節(jié)點(diǎn)，交換他們的dom節(jié)點(diǎn)位置，并執(zhí)行動(dòng)畫。 
 *函數(shù)參數(shù) ：evt
 *函數(shù)返回值 ：
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/
 _onDragOver: function (/**Event*/evt) {
 
 var el = this.el,
 target,
 dragRect,
 revert,
 options = this.options,
 group = options.group,
 groupPut = group.put,
 isOwner = (activeGroup === group),
 canSort = options.sort;
 if (evt.preventDefault !== void 0) {
 evt.preventDefault(); //阻止默認(rèn)事件
 !options.dragoverBubble && evt.stopPropagation();//終止事件在傳播過程的捕獲、目標(biāo)處理或起泡階段進(jìn)一步傳播
 }

 moved = true;
 //activeGroup={name: "words", pull: true, put: true}
 
 
 //activeGroup=true
 //options.disabled=false
 //isOwner=true 因?yàn)閕sOwner=true 則執(zhí)行canSort || (revert = !rootEl.contains(dragEl))
 //如果父節(jié)點(diǎn)包含子節(jié)點(diǎn)則返回true ，contains,所以當(dāng)canSort 是假時(shí)候(revert = !rootEl.contains(dragEl) 
 //revert = !rootEl.contains(dragEl) 取反賦值
 //這里的if需要一個(gè)假才能拖拽
 //(activeGroup.name === group.name) ==true;
 //(evt.rootEl === void 0 || evt.rootEl === this.el) ==true
 //所以 該功能是 給設(shè)置sort參數(shù)提供的
 if (
 activeGroup && 
 !options.disabled &&
 (
  isOwner? canSort || (revert = !rootEl.contains(dragEl)) // Reverting item into the original list
 : activeGroup.pull && groupPut && (
   (activeGroup.name === group.name) || // by Name
    (groupPut.indexOf && ~groupPut.indexOf(activeGroup.name)) // by Array
   )
 ) &&
 (evt.rootEl === void 0 || evt.rootEl === this.el) // touch fallback
 ) 
 {
 // Smart auto-scrolling 智能滾動(dòng)
 _autoScroll(evt, options, this.el);

 if (_silent) { 
 return;
 }
 
 target = _closest(evt.target, options.draggable, el); //調(diào)整拖拽目標(biāo)節(jié)點(diǎn)
 
 
 dragRect = dragEl.getBoundingClientRect(); //獲取dom節(jié)點(diǎn)的一個(gè)獲取left，right ，top，bottmo，值
 
 
 
 if (revert) { //revert undefined
 _cloneHide(true); //設(shè)置克隆的節(jié)點(diǎn)隱藏還是顯示

 if (cloneEl || nextEl) { //如果克隆節(jié)點(diǎn)存在或者下一個(gè)節(jié)點(diǎn)存在
 
 rootEl.insertBefore(dragEl, cloneEl || nextEl);//就把dragEl添加到克隆節(jié)點(diǎn)存在或者下一個(gè)節(jié)點(diǎn)的上面
 
 }
 else if (!canSort) { //canSort 默認(rèn)是true ，是設(shè)置是否 判斷是否在自己區(qū)域拖拽
 rootEl.appendChild(dragEl); //canSort 是假添加到根節(jié)點(diǎn)
 }
 return;
 }

 //el.children.length 如果拖拽根節(jié)點(diǎn)沒有子節(jié)點(diǎn)的時(shí)候該為true
 //el.children[0] === ghostEl如果根節(jié)點(diǎn)的字節(jié)點(diǎn)等于鏡像節(jié)點(diǎn)的時(shí)候?yàn)檎?
 //el === evt.target 根節(jié)點(diǎn)等于目標(biāo)節(jié)點(diǎn)的時(shí)候
 if ((el.children.length === 0) || (el.children[0] === ghostEl) ||
 (el === evt.target) && (target = _ghostIsLast(el, evt))
 ) {

 if (target) { // 如果_ghostIsLast 返回最后一個(gè)節(jié)點(diǎn)
  if (target.animated) { //判斷 target.animated 動(dòng)畫是否在執(zhí)行，如果在執(zhí)行那么就不執(zhí)行下面函數(shù)
  return;
  }
 
  targetRect = target.getBoundingClientRect();
 }
 //隱藏克隆節(jié)點(diǎn)
 _cloneHide(isOwner);
 

 /*
 rootEl:拖拽根節(jié)點(diǎn)
 el:拖拽根節(jié)點(diǎn)
 dragEl:拖拽節(jié)點(diǎn)
 dragRect:拖拽幾點(diǎn)的Rect
 target:目標(biāo)節(jié)點(diǎn)或者是根節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)，釋放鼠標(biāo)的節(jié)點(diǎn)
 targetRect:target的Rect
 */
 
 
 if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect) !== false) {
 if (!dragEl.contains(el)) { // 判斷dragEl中沒有存在根節(jié)點(diǎn)
 el.appendChild(dragEl); //就把目拖拽節(jié)點(diǎn)添加到根節(jié)點(diǎn)那
 parentEl = el; // actualization
 }
 //動(dòng)畫
 this._animate(dragRect, dragEl);
 target && this._animate(targetRect, target);
 }
 }
 //target 拖拽的目標(biāo)節(jié)點(diǎn)存在
 //target.animated動(dòng)畫沒有在執(zhí)行
 //target !== dragEl 拖拽的節(jié)點(diǎn)不等于目標(biāo)節(jié)點(diǎn) 就是發(fā)生了dragenter事件
 //target 拖拽的父節(jié)點(diǎn)是根節(jié)點(diǎn) rootEl 
 else if (target && !target.animated && target !== dragEl && (target.parentNode[expando] !== void 0)) {
 
 i++;
 if (lastEl !== target) { // 拖拽的目標(biāo)節(jié)點(diǎn)就是發(fā)生拖拽ondragover時(shí)候的節(jié)點(diǎn) 不是最后一個(gè)子節(jié)點(diǎn)的時(shí)候
 lastEl = target; //將拖拽的目標(biāo)節(jié)點(diǎn)賦值給最后一個(gè)節(jié)點(diǎn)
 lastCSS = _css(target); //獲取最后目標(biāo)節(jié)點(diǎn)的css全部屬性
 lastParentCSS = _css(target.parentNode); //獲取根節(jié)點(diǎn)的全部css屬性
 } 

 
 
 ///left|right|inline/.test(str) 匹配str中只要含有l(wèi)eft|right|inline 中的任何一個(gè)就可以為真
 //floating 其實(shí)就是判斷這里的拖拽節(jié)點(diǎn)是否已經(jīng)有浮動(dòng)，或者是inline也跟浮動(dòng)差不多，或者是css3的flex-direction橫向?qū)ζ涑梢慌诺哪莻€(gè)屬性
 //isWide：如果目標(biāo)節(jié)點(diǎn)的寬大于拖拽節(jié)點(diǎn)的寬
 //isLong:如果目標(biāo)節(jié)點(diǎn)的高大于拖拽節(jié)點(diǎn)的高
 var targetRect = target.getBoundingClientRect(), //目標(biāo)節(jié)點(diǎn)的rect
 width = targetRect.right - targetRect.left, //目標(biāo)節(jié)點(diǎn)的寬
 height = targetRect.bottom - targetRect.top, //目標(biāo)節(jié)點(diǎn)的高 
 floating = /left|right|inline|inlineBlock/.test(lastCSS.cssFloat + lastCSS.display)
  || (lastParentCSS.display == 'flex' && lastParentCSS['flex-direction'].indexOf('row') === 0),
 isWide = (target.offsetWidth > dragEl.offsetWidth), //目標(biāo)節(jié)點(diǎn)寬大于拖拽節(jié)點(diǎn)
 isLong = (target.offsetHeight > dragEl.offsetHeight),//目標(biāo)節(jié)點(diǎn)高大于拖拽節(jié)點(diǎn)
 //halfway 如果floating 浮動(dòng)，inline，橫向?qū)R 了就判斷此時(shí)鼠標(biāo)是在target中間的左邊還是右邊，右邊則為true，否則false
 //halfway 如果floating 沒有浮動(dòng)，inline，橫向?qū)R 就判斷此時(shí)鼠標(biāo)是在target中間的上面邊還是下面，下邊則為true，否則false
 halfway = (floating ?
  (evt.clientX - targetRect.left) / width : 
  (evt.clientY - targetRect.top) / height
  ) 
  > 0.5,
 // 目標(biāo)節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)。 
 nextSibling = target.nextElementSibling,
 /*
 rootEl:拖拽根節(jié)點(diǎn)
 el:拖拽根節(jié)點(diǎn)
 dragEl:拖拽節(jié)點(diǎn)
 dragRect:拖拽幾點(diǎn)的Rect
 target:拖拽節(jié)點(diǎn)或者是根節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)
 targetRect:target的Rect
 */
 
 moveVector = _onMove(rootEl, el, dragEl, dragRect, target, targetRect), //空undefined
 after // after true 往下拖拽, false 往上拖拽
 ;

 if (moveVector !== false) {
  _silent = true;
  setTimeout(_unsilent, 30); //30毫秒設(shè)置為假
 
  _cloneHide(isOwner); //隱藏克隆節(jié)點(diǎn)
 
  if (moveVector === 1 || moveVector === -1) {//空undefined
  after = (moveVector === 1);
  }
  else if (floating) { //如果浮動(dòng)
  
  var elTop = dragEl.offsetTop, //拖拽接點(diǎn)的top
   tgTop = target.offsetTop; //目標(biāo)節(jié)點(diǎn)top
  
  if (elTop === tgTop) { // //拖拽幾點(diǎn)的top===目標(biāo)節(jié)點(diǎn)top 說明他們是在同一列中
  
  //target.previousElementSibling 如果目標(biāo)節(jié)點(diǎn)的上一個(gè)節(jié)點(diǎn)是拖拽節(jié)點(diǎn)，這里就是他們上下節(jié)點(diǎn)互換位置,!isWide 目標(biāo)節(jié)點(diǎn)寬小于拖拽節(jié)點(diǎn)
  //或者 halfway 為真并且 isWide 目標(biāo)節(jié)點(diǎn)寬大于拖拽節(jié)點(diǎn)
  //
 
   
  } else {
   
   //目標(biāo)節(jié)點(diǎn)top大于>拖拽接點(diǎn)的top 
   after = tgTop > elTop; // after true 往下拖拽 false 往上拖拽
  
  }
  } else {
  //沒有浮動(dòng)的時(shí)候
  // 目標(biāo)節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)。
  // console.log('nextSibling !== dragEl'+(nextSibling !== dragEl)); //往下拖拽
  //dom節(jié)點(diǎn)是按照拖拽完之后排序做判斷
  //(nextSibling !== dragEl) 不是往上拖拽的時(shí)候 則為真的時(shí)候 如果目標(biāo)節(jié)點(diǎn)的高大于拖拽節(jié)點(diǎn)的高
  //halfway 為真的時(shí)候。如果目標(biāo)節(jié)點(diǎn)的高大于拖拽節(jié)點(diǎn)的高after 為真
  after = (nextSibling !== dragEl) && !isLong || halfway && isLong;
  }

  if (!dragEl.contains(el)) {
  
  if (after && !nextSibling) { //
  
  el.appendChild(dragEl); //如果此時(shí) 目標(biāo)的的下一個(gè)節(jié)點(diǎn)不存在那么直接把拖拽節(jié)點(diǎn)添加在后面即可
  } else {
  //判斷拖拽節(jié)點(diǎn)添加到哪個(gè)位置after真時(shí)候是往下拖拽則把拖拽節(jié)點(diǎn)添加到target下面。
  //判斷拖拽節(jié)點(diǎn)添加到哪個(gè)位置after假時(shí)候是往下拖拽則把拖拽節(jié)點(diǎn)添加到target上面。
  target.parentNode.insertBefore(dragEl, after ? nextSibling : target);
  }
  }

 parentEl = dragEl.parentNode; // actualization
 //交換位置前的drgRect， 交換后位置的拖拽節(jié)點(diǎn)dragEl
 //交換位置前的目標(biāo)節(jié)點(diǎn)targetRect， 交換后位置的目標(biāo)節(jié)點(diǎn)dragEl
 
  //執(zhí)行動(dòng)畫。css3動(dòng)畫
 this._animate(dragRect, dragEl); //執(zhí)行css3動(dòng)畫其實(shí)只是一種掩飾而已，真正的核心是他們交換dom節(jié)點(diǎn)的位置
  //執(zhí)行動(dòng)畫。css3動(dòng)畫
 this._animate(targetRect, target);
 }
 }
 }
 },
 
 /***********************************************************************************************
 *函數(shù)名 ：_animate
 *函數(shù)功能描述 ： 動(dòng)畫效果，執(zhí)行css3動(dòng)畫
 *函數(shù)參數(shù) ： 
 prevRect：obj，初始動(dòng)畫的坐標(biāo)，
 target：obj，target 其實(shí)最重要是獲取交換dom節(jié)點(diǎn)后的坐標(biāo)
 *函數(shù)返回值 ：
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/
 _animate: function (prevRect, target) {
 //每次當(dāng)目標(biāo)節(jié)點(diǎn)與拖拽節(jié)點(diǎn)交替的時(shí)候就調(diào)用次改函數(shù)
 //i++;
 
 
 //prevRect: obj.getBoundingClientRect
 //target:obj
 var ms = this.options.animation; //動(dòng)畫延遲
 
 if (ms) {
 var currentRect = target.getBoundingClientRect();

 //debugger;
 _css(target, 'transition', 'none');
 _css(target, 'transform', 'translate3d('
 + (prevRect.left - currentRect.left) + 'px,'
 + (prevRect.top - currentRect.top) + 'px,0)'
 );

 target.offsetWidth; // repaint

 _css(target, 'transition', 'all ' + ms + 'ms');
 _css(target, 'transform', 'translate3d(0,0,0)');

 clearTimeout(target.animated);
 target.animated = setTimeout(function () {
 _css(target, 'transition', '');
 _css(target, 'transform', '');
 target.animated = false;
 }, ms);
 }
 },
 /***********************************************************************************************
 *函數(shù)名 ：_offUpEvents
 *函數(shù)功能描述 ： 解綁文檔上的拖拽函數(shù)
 *函數(shù)參數(shù) ： viod
 *函數(shù)返回值 ：viod
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/

 _offUpEvents: function () {
 var ownerDocument = this.el.ownerDocument;

 _off(document, 'touchmove', this._onTouchMove); //當(dāng)文檔上面document 發(fā)生觸摸移動(dòng)事件的時(shí)候解綁 _onTouchMove事件
 _off(ownerDocument, 'mouseup', this._onDrop); //當(dāng)文檔上面document 發(fā)生鼠標(biāo)抬起事件的時(shí)候解綁 _onTouchMove事件
 _off(ownerDocument, 'touchend', this._onDrop); //當(dāng)文檔上面document 發(fā)生觸摸結(jié)束事件的時(shí)候解綁 _onTouchMove事件
 
 //當(dāng)一些更高級(jí)別的事件發(fā)生的時(shí)候（如電話接入或者彈出信息）會(huì)取消當(dāng)前的touch操作，即觸發(fā)ontouchcancel。一般會(huì)在ontouchcancel時(shí)暫停游戲、存檔等操作。

 _off(ownerDocument, 'touchcancel', this._onDrop); //當(dāng)文檔發(fā)生手指劃過結(jié)束的時(shí)候解綁_onDrop 事件
 },
//Drop被拖拽的元素在目標(biāo)元素上同時(shí)鼠標(biāo)放開觸發(fā)的事件，此事件作用在目標(biāo)元素上

 /***********************************************************************************************
 *函數(shù)名 ：init
 *函數(shù)功能描述 ： 初始化作用
 *函數(shù)參數(shù) ：
 *函數(shù)返回值 ：
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/
 _onDrop: function (/**Event*/evt) {
 //evt 事件對(duì)象
 
 var el = this.el, //拖拽的根節(jié)點(diǎn)
 options = this.options; //參數(shù)類

 clearInterval(this._loopId); //清除_loopId 定時(shí)器
 clearInterval(autoScroll.pid);//清除pid 定時(shí)器
 clearTimeout(this._dragStartTimer);//清除_dragStartTimer 定時(shí)器

 // Unbind events
 _off(document, 'mousemove', this._onTouchMove); //解除文檔上面的鼠標(biāo)移動(dòng)事件函數(shù)為_onTouchMove
 /*
 
 DataTransfer 對(duì)象：退拽對(duì)象用來傳遞的媒介，使用一般為Event.dataTransfer。
 draggable 屬性：就是標(biāo)簽元素要設(shè)置draggable=true，否則不會(huì)有效果，例如：

 <div title="拖拽我" draggable="true">列表1</div>
 
 ondragstart 事件：當(dāng)拖拽元素開始被拖拽的時(shí)候觸發(fā)的事件，此事件作用在被拖曳元素上
 ondragenter 事件：當(dāng)拖曳元素進(jìn)入目標(biāo)元素的時(shí)候觸發(fā)的事件，此事件作用在目標(biāo)元素上
 ondragover 事件：拖拽元素在目標(biāo)元素上移動(dòng)的時(shí)候觸發(fā)的事件，此事件作用在目標(biāo)元素上
 ondrop 事件：被拖拽的元素在目標(biāo)元素上同時(shí)鼠標(biāo)放開觸發(fā)的事件，此事件作用在目標(biāo)元素上
 ondragend 事件：當(dāng)拖拽完成后觸發(fā)的事件，此事件作用在被拖曳元素上
 Event.preventDefault() 方法：阻止默認(rèn)的些事件方法等執(zhí)行。在ondragover中一定要執(zhí)行preventDefault()，否則ondrop事件不會(huì)被觸發(fā)。另外，如果是從其他應(yīng)用軟件或是文件中拖東西進(jìn)來，尤其是圖片的時(shí)候，默認(rèn)的動(dòng)作是顯示這個(gè)圖片或是相關(guān)信息，并不是真的執(zhí)行drop。此時(shí)需要用用document的ondragover事件把它直接干掉。
 Event.effectAllowed 屬性：就是拖拽的效果。
如果nativeDraggable是true 那么
 */
 if (this.nativeDraggable) {
 _off(document, 'drop', this); //解綁drop 事件 函數(shù)是handleEvent
 _off(el, 'dragstart', this._onDragStart); //解綁html5的拖拽dragstart事件 函數(shù)是 _onDragStart
 }
 //解綁文檔上面的一些事件
 this._offUpEvents();

 if (evt) {
 if (moved) {
 evt.preventDefault(); //阻止默認(rèn)事件
 !options.dropBubble && evt.stopPropagation(); //阻止事件冒泡
 }
 //ghostEl 在736行時(shí)候才會(huì)創(chuàng)建該節(jié)點(diǎn)，所以在736行調(diào)用_onDrop函數(shù)的時(shí)候都是為空
 //如果拖拽的鏡像對(duì)象存在那么他就添加在拖拽的根節(jié)點(diǎn)
 ghostEl && ghostEl.parentNode.removeChild(ghostEl);

 
 if (dragEl) {
 if (this.nativeDraggable) {
 //如果拖拽節(jié)點(diǎn)存在了 就解綁this 的 handleEvent 事件
 _off(dragEl, 'dragend', this);
 }
 //禁用拖拽html5 屬性
 _disableDraggable(dragEl);

 // Remove class's //刪除css
 _toggleClass(dragEl, this.options.ghostClass, false);
 _toggleClass(dragEl, this.options.chosenClass, false);
 
 if (rootEl !== parentEl) { //如果從一個(gè)列表拖拽到另一個(gè)列表的時(shí)候
 //返回當(dāng)前的索引
 newIndex = _index(dragEl, options.draggable);
 
 if (newIndex >= 0) { //如果當(dāng)前的索引大于0
  // drag from one list and drop into another //從類表中拖拽到另一個(gè)列表
  //事件接口
  _dispatchEvent(null, parentEl, 'sort', dragEl, rootEl, oldIndex, newIndex); //開始拖拽函數(shù)創(chuàng)建與觸發(fā)
  
  _dispatchEvent(this, rootEl, 'sort', dragEl, rootEl, oldIndex, newIndex);//開始拖拽函數(shù)創(chuàng)建與觸發(fā)
 
  // Add event
  _dispatchEvent(null, parentEl, 'add', dragEl, rootEl, oldIndex, newIndex);//添加節(jié)點(diǎn)拖拽函數(shù)創(chuàng)建與觸發(fā)
 
  // Remove event//刪除節(jié)點(diǎn)拖拽函數(shù)創(chuàng)建與觸發(fā)
  _dispatchEvent(this, rootEl, 'remove', dragEl, rootEl, oldIndex, newIndex);
 }
 
 }
 else { //同一個(gè)列表中
 // Remove clone
 cloneEl && cloneEl.parentNode.removeChild(cloneEl);

 if (dragEl.nextSibling !== nextEl) {
 // Get the index of the dragged element within its parent
 newIndex = _index(dragEl, options.draggable);

 if (newIndex >= 0) {
 
  
 // drag & drop within the same list //update拖拽更新新數(shù)據(jù)
 _dispatchEvent(this, rootEl, 'update', dragEl, rootEl, oldIndex, newIndex);
 _dispatchEvent(this, rootEl, 'sort', dragEl, rootEl, oldIndex, newIndex);
 }
 }
 }

 if (Sortable.active) { //Sortable.active 存在說明已經(jīng)拖拽開始了
 /* jshint eqnull:true */
 if (newIndex == null || newIndex === -1) {//newIndex 這個(gè)條件成立的時(shí)候是拖拽第一個(gè)節(jié)點(diǎn)并且沒有更換拖拽位置
 newIndex = oldIndex;
 }
 //拖拽結(jié)束 
 _dispatchEvent(this, rootEl, 'end', dragEl, rootEl, oldIndex, newIndex);

 // Save sorting //保存排序
 this.save();
 }
 }

 }
 //重新初始化參數(shù)
 this._nulling();
 },
 /***********************************************************************************************
 *函數(shù)名 ：_nulling
 *函數(shù)功能描述 ： 初始化拖拽的數(shù)據(jù)
 *函數(shù)參數(shù) ：
 *函數(shù)返回值 ：
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/
 _nulling: function () {
 if (Sortable.active === this) {
 rootEl = //鼠標(biāo)按下去拖拽節(jié)點(diǎn)的根節(jié)點(diǎn)
 dragEl = //鼠標(biāo)按下去拖拽節(jié)點(diǎn) 
 parentEl = //拖拽的父節(jié)點(diǎn) 鼠標(biāo)拖拽 發(fā)生ondragover 事件 拖拽節(jié)點(diǎn)放到目標(biāo)節(jié)點(diǎn)的時(shí)候發(fā)生事件 的根節(jié)點(diǎn) 父節(jié)點(diǎn)，也有可能是鼠標(biāo)按下去拖拽的根節(jié)點(diǎn)
 ghostEl = // 拖拽鏡像
 nextEl = //下一個(gè)節(jié)點(diǎn)
 cloneEl = //拖拽克隆節(jié)點(diǎn)

 scrollEl = //滾動(dòng)節(jié)點(diǎn)
 scrollParentEl = //滾動(dòng)的父節(jié)點(diǎn)

 tapEvt = //tapEvt 觸摸對(duì)象包括x與y軸與拖拽當(dāng)前節(jié)點(diǎn)
 touchEvt = //觸摸事件對(duì)象

 moved = //布爾值
 newIndex = //拖拽的現(xiàn)在索引

 lastEl = //拖拽根節(jié)點(diǎn)中的最后一個(gè)子節(jié)點(diǎn)
 lastCSS = //拖拽根節(jié)點(diǎn)中的最后一個(gè)子節(jié)點(diǎn)class

 activeGroup = //options.group
 Sortable.active = null;
 
 }
 },
 /***********************************************************************************************
 *函數(shù)名 ：handleEvent
 *函數(shù)功能描述 ： 為事件綁定this的時(shí)候提供該事件，判斷是否在拖拽還是拖拽結(jié)束，調(diào)用對(duì)應(yīng)的函數(shù)
 *函數(shù)參數(shù) ：
 evt:
 類型：object，事件類型 拖拽的事件類型
 *函數(shù)返回值 ：
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/
 handleEvent: function (/**Event*/evt) {//handleEvent 是該事件綁定這個(gè)對(duì)象的時(shí)候則發(fā)生這里的事件，則事件綁定給Sortable 的時(shí)候則發(fā)生這里的事件
 var type = evt.type;
 //dragover 在拖拽區(qū)域移動(dòng)拖拽時(shí)候發(fā)生事件相當(dāng)于move
 //dragenter 元素放入到拖拽的區(qū)域中相當(dāng)于 over
 if (type === 'dragover' || type === 'dragenter') { //事件正在拖拽的時(shí)候 
 
 
 if (dragEl) { //在300行的時(shí)候調(diào)用dragover與dragenter事件，這個(gè)時(shí)候dragEl是處于聲明而已但是沒有賦值所以是undefined， 如果dragEl 存在則是真正拖拽的時(shí)候，dragEl是拖拽鏡像
 this._onDragOver(evt);
 _globalDragOver(evt);
 }
 }
 else if (type === 'drop' || type === 'dragend') { //拖拽事件結(jié)束的時(shí)候
 this._onDrop(evt);
 }
 },


 /**
 * Serializes the item into an array of string.
 * @returns {String[]}
 */
 /***********************************************************************************************
 *函數(shù)名 ：toArray
 
 *函數(shù)功能描述 ： 獲取dom節(jié)點(diǎn)的 data-id 的屬性 如果沒有則 會(huì)調(diào)用_generateId函數(shù)生成唯一表示符 
 *函數(shù)參數(shù) ： viod 
 *函數(shù)返回值 ： 類型：array 生成唯一標(biāo)識(shí)符的id數(shù)組
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/
 toArray: function () {
 var order = [],
 el,
 children = this.el.children, //獲取所有子節(jié)點(diǎn)
 i = 0,
 n = children.length, //獲取子節(jié)點(diǎn)的長(zhǎng)度
 options = this.options;


 for (; i < n; i++) {
 el = children[i];
 if (_closest(el, options.draggable, this.el)) {
 //getAttribute獲取 data-id 的屬性
 //order.push 如果沒有data-id 屬性獲取不到值，則會(huì)調(diào)用_generateId函數(shù)生成唯一表示符
 order.push(el.getAttribute(options.dataIdAttr) || _generateId(el));
 }
 }
 //返回唯一標(biāo)識(shí)符id 數(shù)組 類型
 return order;
 },


 /**
 * Sorts the elements according to the array.
 * @param {String[]} order order of the items
 */
 
 /***********************************************************************************************
 *函數(shù)名 ：sort
 
 *函數(shù)功能描述 ： 刪除含有這個(gè)id的子節(jié)點(diǎn) 刪除他 讓他重新排序， 從棧底部插入數(shù)據(jù)
 *函數(shù)參數(shù) ： order：
  類型：array， 數(shù)組id
 
 *函數(shù)返回值 ： void
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/
 sort: function (order) {
 debugger;
 //order 數(shù)組
 var items = {},
 rootEl = this.el; //鼠標(biāo)開始拖拽的根節(jié)點(diǎn)
 

 this.toArray().forEach(function (id, i) { //遍歷this.toArray() 數(shù)組中的id
 var el = rootEl.children[i];
 
 if (_closest(el, this.options.draggable, rootEl)) {
 items[id] = el; //遍歷數(shù)組中的id 賦值給一個(gè)對(duì)象
 }
 }, this);

 order.forEach(function (id) {
 if (items[id]) {
 rootEl.removeChild(items[id]); //刪除含有這個(gè)id的子節(jié)點(diǎn) 刪除他 讓他重新排序，
 rootEl.appendChild(items[id]);//刪除含有這個(gè)id的子節(jié)點(diǎn) 刪除他 讓他重新排序， 從棧底部插入數(shù)據(jù)
 }
 });
 },


 /**
 * Save the current sorting
 保存排序
 */
 save: function () { 
 var store = this.options.store;
 store && store.set(this);
 },


 /**
 * For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
 * @param {HTMLElement} el
 * @param {String} [selector] default: `options.draggable`
 * @returns {HTMLElement|null}
 */
 /***********************************************************************************************
 *函數(shù)名 ：_closest
 *函數(shù)功能描述 ： 用來調(diào)節(jié)節(jié)點(diǎn)，匹配節(jié)點(diǎn)。匹配calss。 匹配觸發(fā)dom該函數(shù)的dom節(jié)點(diǎn)中的tag或者class，selector參數(shù)可以是tag或者class或者>*，
 如果是>* 并且當(dāng)前的父節(jié)點(diǎn)和ctx 參數(shù)相同 則不需要匹配直接返回el，如果是tag或者class則匹配。
 *函數(shù)參數(shù) ：
 el：
  類型:obj，拖拽節(jié)點(diǎn)dom
 selector：
  類型：字符串，如果selector是'li' : '>*'則返回是改節(jié)點(diǎn)dom，還有如果selector是和當(dāng)前拖拽節(jié)點(diǎn)的name相同則也返回改節(jié)點(diǎn)dom，還有匹配觸發(fā)該函數(shù)的el中的class是否是和參數(shù)中selector相同，相同則返回true，否則返回null
  
 *函數(shù)返回值 ：dom和null
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/
 closest: function (el, selector) {
 
 return _closest(el, selector || this.options.draggable, this.el);
 },


 /**
 * Set/get option
 * @param {string} name
 * @param {*} [value]
 * @returns {*}
 */
 /***********************************************************************************************
 *函數(shù)名 ：option
 *函數(shù)功能描述 ： 獲取option對(duì)象中的某個(gè)參數(shù)，或者設(shè)置option對(duì)象中的某個(gè)參數(shù)
 
 *函數(shù)參數(shù) ：name：
  類型：string， option的key，
  
 value：類型：string， 設(shè)置option的值
  
 *函數(shù)返回值 ： viod
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/
 
 option: function (name, value) {
 var options = this.options;

 if (value === void 0) { //當(dāng)沒有傳遞第二個(gè)參數(shù)的時(shí)候 則返回該options參數(shù)的某個(gè)值
 return options[name];
 } else {
 options[name] = value;// 設(shè)置options參數(shù)的某個(gè)值 

 if (name === 'group') { // 如果name 是group 則在后面添加['pull', 'put']屬性
 _prepareGroup(options);
 }
 }
 },


 /**
 * Destroy 破壞
 */
 /***********************************************************************************************
 *函數(shù)名 ：destroy
 *函數(shù)功能描述 ： 清空拖拽事件，和情況拖拽列表dom節(jié)點(diǎn)，銷毀拖拽 。
 
 *函數(shù)參數(shù) viod
 *函數(shù)返回值 ： viod
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/
 destroy: function () {
 var el = this.el;

 el[expando] = null; //把每一個(gè)時(shí)間戳的Sortable 的對(duì)象置為空

 _off(el, 'mousedown', this._onTapStart); // 解綁拖拽類表中的mousedown事件_onTapStart函數(shù)
 _off(el, 'touchstart', this._onTapStart); // 解綁拖拽類表中的touchstart事件_onTapStart函數(shù)

 if (this.nativeDraggable) {
 _off(el, 'dragover', this); // 解綁拖拽類表中的dragover事件handleEvent函數(shù) 
 _off(el, 'dragenter', this);// 解綁拖拽類表中的dragover事件handleEvent函數(shù)
 }

 // Remove draggable attributes
 //把頁面上所有含有draggable 屬性的dom節(jié)點(diǎn) 全部刪除該屬性，讓它不能拖拽
 Array.prototype.forEach.call(el.querySelectorAll('[draggable]'), function (el) {
 el.removeAttribute('draggable');
 });
 //刪除touchDragOverListeners 觸摸列表事件_onDragOver
 touchDragOverListeners.splice(touchDragOverListeners.indexOf(this._onDragOver), 1);

 this._onDrop(); //重新初始化

 this.el = el = null; //把拖拽列表的dom節(jié)點(diǎn)清空
 }
 };

 /***********************************************************************************************
 *函數(shù)名 ：_cloneHide
 *函數(shù)功能描述 ： 設(shè)置克隆的節(jié)點(diǎn)隱藏顯示，是否添加到頁面
 *函數(shù)參數(shù) ： 
 state：
  類型:Boolean 真，假
 *函數(shù)返回值 ： viod
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/
 function _cloneHide(state) {
 //state布爾值
 //cloneEl 克隆的節(jié)點(diǎn)
 //state 狀態(tài)
 if (cloneEl && (cloneEl.state !== state)) {//如果cloneEl 存在，并且cloneEl.state 不等于state 的時(shí)候
 _css(cloneEl, 'display', state ? 'none' : ''); //state 為真的時(shí)候把它隱藏，為假的時(shí)候顯示
 !state && cloneEl.state && rootEl.insertBefore(cloneEl, dragEl);//state為假的時(shí)候cloneEl.state 為真則把cloneEl添加在dragEl前面
 cloneEl.state = state; //
 }
 }

 /***********************************************************************************************
 *函數(shù)名 ：_closest
 *函數(shù)功能描述 ： 匹配觸發(fā)dom該函數(shù)的dom節(jié)點(diǎn)中的tag或者class，selector參數(shù)可以是tag或者class或者>*，
 如果是>* 并且當(dāng)前的父節(jié)點(diǎn)和ctx 參數(shù)相同 則不需要匹配直接返回el，如果是tag或者class則匹配
 *函數(shù)參數(shù) ：
 el：
  類型:obj，拖拽節(jié)點(diǎn)dom
 selector：
  類型：字符串，如果selector是'li' : '>*'則返回是改節(jié)點(diǎn)dom，還有如果selector是和當(dāng)前拖拽節(jié)點(diǎn)的name相同則也返回改節(jié)點(diǎn)dom，還有匹配觸發(fā)該函數(shù)的el中的class是否是和參數(shù)中selector相同，相同則返回true，否則返回null
 ctx：ctx用來匹配當(dāng)前selector的父節(jié)點(diǎn)是否等于ctx節(jié)點(diǎn) 
 *函數(shù)返回值 ：dom和null
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/
 function _closest(/**HTMLElement*/el, /**String*/selector, /**HTMLElement*/ctx) {
/* el 目標(biāo)節(jié)點(diǎn)
selector /[uo]l/i.test(el.nodeName) ? 'li' : '>*',
ctx 父親節(jié)點(diǎn)*/
 if (el) {
 //如果沒有傳父親節(jié)點(diǎn)過來則是整個(gè)文檔
 ctx = ctx || document;
 
 do {
 
 if (
 //如果不是li而是其他節(jié)點(diǎn) 并且已經(jīng)搜索完了直到是父親節(jié)點(diǎn)的時(shí)候就返回true
 //或者走_(dá)matches _matches 需要true
 //selector === '>*' && el.parentNode === ctx 如果 selector === '>*' 表示父節(jié)點(diǎn)不是ol或ul
 (selector === '>*' && el.parentNode === ctx)
 || _matches(el, selector)
 ) {
 
 return el; 
 }
 }
 //el !== ctx 如果目標(biāo)節(jié)點(diǎn)不是當(dāng)前的父節(jié)點(diǎn)，則會(huì)一直找上一層的父節(jié)點(diǎn)知道當(dāng)他找到當(dāng)前的根父節(jié)點(diǎn)程序則停止。 
 while (el !== ctx && (el = el.parentNode)); //如果條件不成立一直需找上一層父節(jié)點(diǎn)
 }

 return null;
 }

 /*
 *函數(shù)名 ：_globalDragOver
 *函數(shù)功能描述 ：設(shè)置拖動(dòng)的元素移動(dòng)到放置目標(biāo)。
 *參數(shù)說明：
 evt：類型obj事件對(duì)象
 返回值：void
 */
 function _globalDragOver(/**Event*/evt) {
 /*
 1.effectAllowed屬性表示允許拖放元素的哪種dropEffect。什么是dropEffect?也是dataTransfer 的一種屬性。
 dropEffect屬性可以知道被拖動(dòng)的元素能夠執(zhí)行哪種放置行為（當(dāng)拖到目的地時(shí)）。這個(gè)屬性有下列4個(gè)可能的值。
“none”：不能把拖動(dòng)的元素放在這里。這是除文本框之外所有元素的默認(rèn)值。
“move”：應(yīng)該把拖動(dòng)的元素移動(dòng)到放置目標(biāo)。
“copy”：應(yīng)該把拖動(dòng)的元素復(fù)制到放置目標(biāo)。
“l(fā)ink”：表示放置目標(biāo)會(huì)打開拖動(dòng)的元素（但拖動(dòng)的元素必須是一個(gè)鏈接，有URL）。
 2. dt.effectAllowed = 'all'：即說被拖動(dòng)元素在放置到目的地時(shí)，可以上面的任意一種效果來處理。
 3. 必須在ondraggstart事件處理程序中設(shè)置effectAllowed屬性。
 */
 if (evt.dataTransfer) {
 
 evt.dataTransfer.dropEffect = 'move'; //“move”：應(yīng)該把拖動(dòng)的元素移動(dòng)到放置目標(biāo)。
 }
 evt.preventDefault();
 }

 /*
 *函數(shù)名 ：_on
 *函數(shù)功能描述 ： 事件綁定
 *參數(shù)說明：
 el：類型DOM節(jié)點(diǎn)， 
 name：類型string，事件類型
 fn：類型：function，需要綁定的函數(shù)
 */
 function _on(el, event, fn) {
 el.addEventListener(event, fn, false);
 }

 /*
 *函數(shù)名 ：_toggleClass
 *函數(shù)功能描述 ： 添加刪除calss
 *參數(shù)說明：
 el：類型DOM節(jié)點(diǎn)， 需要添加和刪除的dom節(jié)點(diǎn)，
 name：類型string，需要添加刪除class字符串的
 fn：類型：布爾值，如果是真則刪除name的class名稱否則添加
 */
 function _off(el, event, fn) {
 el.removeEventListener(event, fn, false);
 }

 /*
 *函數(shù)名 ：_toggleClass
 *函數(shù)功能描述 ： 添加刪除calss
 *參數(shù)說明：
 el：類型DOM節(jié)點(diǎn)， 需要添加和刪除的dom節(jié)點(diǎn)，
 name：類型string，需要添加刪除class字符串的
 state：類型：布爾值，如果是真則刪除name的class名稱否則添加
 */
 function _toggleClass(el, name, state) {
 //console.log(el.classList); //獲取dom節(jié)點(diǎn)clss的個(gè)數(shù)并且以數(shù)組形式存儲(chǔ)起來
 //el.classList 判斷當(dāng)前的拖拽節(jié)點(diǎn)又沒有class 如果有
 if (el) {
 if (el.classList) {
 //如果state 是真則在改節(jié)點(diǎn)上面添加name class 否則刪除name class
 el.classList[state ? 'add' : 'remove'](name);
 }
 else {
 //replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個(gè)與正則表達(dá)式匹配的子串。
 // RSPACE = /\s+/g, 匹配1-n個(gè)空格 全局匹配
 // (' ' + el.className + ' ').replace(RSPACE, ' ') 去除class 中的所有空格 并且只保留一個(gè)空格 每一個(gè)class中
 //className = (' ' + el.className + ' ').replace(RSPACE, '').replace(' ' + name + ' ', ' '); 剔除 name class
 var className = (' ' + el.className + ' ').replace(RSPACE, '').replace(' ' + name + ' ', ' ');
 
 //如果state 是真則在改節(jié)點(diǎn)上面添加name class 否則刪除name class
 el.className = (className + (state ? ' ' + name : '')).replace(RSPACE, ' ');
 }
 }

 
 }
 /*
 *函數(shù)名 ：設(shè)置 樣式 與 獲取dom節(jié)點(diǎn)的style屬性
 *函數(shù)功能描述 ： 添加刪除calss,獲取dom節(jié)點(diǎn)全部css屬性，如果是一個(gè)參數(shù)的時(shí)候?qū)⒎祷卦揹om節(jié)點(diǎn)的全部css屬性，如果是兩個(gè)參數(shù)的時(shí)候該返回該css的第二個(gè)參數(shù)的值，如果是三個(gè)參數(shù)的話將設(shè)置css樣式
 *參數(shù)說明：
 el：類型DOM節(jié)點(diǎn)， 需要添加和刪除的dom節(jié)點(diǎn)，
 prop：類型string，需要添加刪除class字符串的那么
 val：類型：布爾值，如果是真則刪除name的class名稱否則添加
 */

 function _css(el, prop, val) {
 var style = el && el.style; //如果el存在并且他是dom節(jié)點(diǎn)style=el.style

 if (style) {
 if (val === void 0) { //如果val===undefined
 //var win = document.defaultView; 返回當(dāng)前文檔上面的所有對(duì)象
 //document.defaultView.getComputedStyle 返回當(dāng)前文檔上的對(duì)象的樣式方法
 //
 if (document.defaultView && document.defaultView.getComputedStyle) {
 val = document.defaultView.getComputedStyle(el, ''); //獲取到改dom節(jié)點(diǎn)的全部style屬性，并且?guī)в兄?
 }
 else if (el.currentStyle) {
 val = el.currentStyle; //getComputedStyle與currentStyle獲取樣式(style/class)
 }

 return prop === void 0 ? val : val[prop]; //如果prop為undefined則返回style全部屬性
 }
 else {
 if (!(prop in style)) { //如果prop中這個(gè)屬性中style中沒有 
 prop = '-webkit-' + prop; //則在這個(gè)prop前面加 '-webkit-' 字符串
 }

 style[prop] = val + (typeof val === 'string' ? '' : 'px'); // 如果val類型是數(shù)子則添加px
 }
 }
 }

 


 /***********************************************************************************************
 *函數(shù)名 ：_find
 *函數(shù)功能描述 ： 獲取拖拽節(jié)點(diǎn)下面的所有a和img標(biāo)簽，并且設(shè)置他們禁止拖拽行為
 *函數(shù)參數(shù) ：
 ctx：
 類型：dom-obj 拖拽的節(jié)點(diǎn)
 tagName：
  類型：string，ctx.getElementsByTagName(tagName) 
  獲取拖拽節(jié)點(diǎn)下面的所有a和img
 *函數(shù)返回值 ： a和img的dom集合
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/
 function _find(ctx, tagName, iterator) {
 /*
ctx 拖拽的節(jié)點(diǎn)
ctx.getElementsByTagName(tagName) 獲取拖拽節(jié)點(diǎn)下面的所有a和img
_disableDraggable 是一個(gè)函數(shù)
iterator=_disableDraggable
_find(ctx, tagName, iterator) 該函數(shù)功能是把當(dāng)前拖拽對(duì)象的a和img節(jié)點(diǎn)的html5 拖拽屬性改為false
*/
 
 if (ctx) {
 var list = ctx.getElementsByTagName(tagName), i = 0, n = list.length;

 if (iterator) {
 for (; i < n; i++) {
 iterator(list[i], i);
 }
 }

 return list;
 }

 return [];
 }

/***********************************************************************************************
 *函數(shù)名 ：_dispatchEvent
 *函數(shù)功能描述 ： 創(chuàng)建一個(gè)事件，事件參數(shù)主要由name 提供，并且觸發(fā)該事件，其實(shí)就是模擬事件并且觸發(fā)該事件 
 *函數(shù)參數(shù) ：
 sortable：
 類型： obj sortable
 rootEl：
  類型： dom-obj 鼠標(biāo)按下去拖拽節(jié)點(diǎn)的根節(jié)點(diǎn)
  
 name： 類型： string 需要?jiǎng)?chuàng)建的事件
 
 targetEl：dom-obj 鼠標(biāo)按下去拖拽節(jié)點(diǎn)，觸屏到發(fā)生事件ondragover的節(jié)點(diǎn)的根節(jié)點(diǎn)，就是目標(biāo)節(jié)點(diǎn)的根節(jié)點(diǎn)。但是如果是start事件的時(shí)候傳進(jìn)來的改參數(shù)就是鼠標(biāo)按下去拖拽節(jié)點(diǎn)的根節(jié)點(diǎn)
 
 fromEl：
  類型： dom-obj 鼠標(biāo)按下去拖拽節(jié)點(diǎn)的根節(jié)點(diǎn) 參數(shù)和第二個(gè)一樣，為什么重寫參數(shù)進(jìn)來呢，可能是為了兼容這樣的的吧
 
 startIndex：
  類型： number 鼠標(biāo)按下去拖拽節(jié)點(diǎn)的索引
 newIndex： 
  類型： number 
 
 * *函數(shù)返回值 ：
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/
 function _dispatchEvent(sortable, rootEl, name, targetEl, fromEl, startIndex, newIndex) {
 
 var evt = document.createEvent('Event'), //創(chuàng)建一個(gè)事件
 options = (sortable || rootEl[expando]).options, //獲取options 參數(shù)
 //name.charAt(0) 獲取name的第一個(gè)字符串
 //toUpperCase() 變成大寫
 //name.substr(1) 提取從索引為1下標(biāo)到字符串的結(jié)束位置的字符串
 //onName 將獲得 on+首個(gè)字母大寫+name從第一個(gè)下標(biāo)獲取到的字符串
 onName = 'on' + name.charAt(0).toUpperCase() + name.substr(1);

 evt.initEvent(name, true, true); //自定義一個(gè)事件

 evt.to = rootEl; //在觸發(fā)該事件發(fā)生evt的時(shí)候，將evt添加多一個(gè)to屬性，值為rootEl
 evt.from = fromEl || rootEl; //在觸發(fā)該事件發(fā)生evt的時(shí)候，將evt添加多一個(gè)to屬性，值為rootEl
 evt.item = targetEl || rootEl; //在觸發(fā)該事件發(fā)生evt的時(shí)候，將evt添加多一個(gè)to屬性，值為rootEl
 evt.clone = cloneEl; //在觸發(fā)該事件發(fā)生evt的時(shí)候，將evt添加多一個(gè)to屬性，值為rootEl

 evt.oldIndex = startIndex; //開始拖拽節(jié)點(diǎn)
 evt.newIndex = newIndex; //現(xiàn)在節(jié)點(diǎn)
 //觸發(fā)該事件，并且是在rootEl 節(jié)點(diǎn)上面 。觸發(fā)事件接口就這這里了。onAdd: onUpdate: onRemove:onStart:onSort:onEnd: 
 
 rootEl.dispatchEvent(evt);

 if (options[onName]) {
 options[onName].call(sortable, evt);
 }
 }

 /***********************************************************************************************
 *函數(shù)名 ：_onMove
 *函數(shù)功能描述 ： 表格分頁數(shù)據(jù)
 *函數(shù)參數(shù) ： 
 fromEl：
 類型：obj，拖拽的根節(jié)點(diǎn)
 toEl：
 類型：obj，拖拽的根節(jié)點(diǎn)
 dragEl：
 類型：obj，拖拽的節(jié)點(diǎn)
 dragRect：
 類型：obj，拖拽的節(jié)點(diǎn)rect
 targetEl：
 類型：obj，目標(biāo)節(jié)點(diǎn) ondragover 發(fā)生事件的節(jié)點(diǎn)
 targetRect：
 類型：obj，目標(biāo)節(jié)點(diǎn)rect
 *函數(shù)返回值 ： retVal
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/
 function _onMove(fromEl, toEl, dragEl, dragRect, targetEl, targetRect) {
 
 var evt, 
 //sortable 類 //fromEl 是根節(jié)點(diǎn)
 sortable = fromEl[expando], //expando = 'Sortable' + (new Date).getTime(), //字符串Sortable+時(shí)間戳 el[expando] = this; //把 Sortable 類放在HTMLDOM節(jié)點(diǎn)的expando屬性中
 
 onMoveFn = sortable.options.onMove, //空undefined
 retVal;
 
 
 evt = document.createEvent('Event'); //創(chuàng)建一個(gè)事件對(duì)象
 evt.initEvent('move', true, true); //添加移動(dòng)事件

 evt.to = toEl; //把根節(jié)點(diǎn)賦值給to的屬性上面
 evt.from = fromEl; //把根節(jié)點(diǎn)賦值給from的屬性上面
 evt.dragged = dragEl; //把現(xiàn)在拖拽節(jié)點(diǎn)賦值給to的屬性上面
 evt.draggedRect = dragRect; //把現(xiàn) 在拖拽節(jié)點(diǎn)的rect
 evt.related = targetEl || toEl; //判斷目標(biāo)節(jié)點(diǎn)或者是toel節(jié)點(diǎn)誰存在誰賦值給related 不過targetEl 有限權(quán)限高
 evt.relatedRect = targetRect || toEl.getBoundingClientRect(); //判斷targetEl的節(jié)點(diǎn)的rect或者是toel節(jié)點(diǎn)rect誰存在誰賦值給related 不過targetEl的rect 有限權(quán)限高

 fromEl.dispatchEvent(evt); //在根節(jié)點(diǎn)觸發(fā)移動(dòng)事件

 if (onMoveFn) {
 retVal = onMoveFn.call(sortable, evt); //如果移動(dòng)函數(shù)存在則知心移動(dòng)函數(shù)onMoveFn
 }

 return retVal; //返回該移動(dòng)函數(shù)執(zhí)行的結(jié)果 //空undefined
 }
 /***********************************************************************************************
 *函數(shù)名 ：_disableDraggable
 *函數(shù)功能描述 ： 禁用拖動(dòng) 把heml5的拖拽屬性設(shè)置為假
 *函數(shù)參數(shù) ：viod
 *函數(shù)返回值 ：無
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/

 function _disableDraggable(el) {
 el.draggable = false;
 }

 /***********************************************************************************************
 *函數(shù)名 ：_unsilent
 *函數(shù)功能描述 ： 將 _silent 設(shè)置為假
 *函數(shù)參數(shù) ：viod
 *函數(shù)返回值 ：無
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/
 function _unsilent() {
 _silent = false;
 }


 /** @returns {HTMLElement|false} */
 /***********************************************************************************************
 *函數(shù)名 ：_ghostIsLast
 *函數(shù)功能描述 ： 表格分頁數(shù)據(jù)
 *函數(shù)參數(shù) ：
 el ：類型：dom，拖拽的根節(jié)點(diǎn)
 evt：類型：obj，事件對(duì)象
 *函數(shù)返回值 ：
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/
 function _ghostIsLast(el, evt) {
 var lastEl = el.lastElementChild, //最后一個(gè)節(jié)點(diǎn)
 rect = lastEl.getBoundingClientRect(); //最后一個(gè)節(jié)點(diǎn)的rect
 return (
 (evt.clientY - (rect.top + rect.height) > 5) || //判斷鼠標(biāo)位置是否在dom節(jié)點(diǎn)的bottom下面還是上面 如果是做下面則結(jié)果大于0 否則小于0 ，如果鼠標(biāo)位置在dom節(jié)點(diǎn)bottom下面大于5px的時(shí)候則返回lastEl 節(jié)點(diǎn)
 (evt.clientX - (rect.right + rect.width) > 5) //不知道是不是程序把right寫錯(cuò)了，寫成了left。如果是right話則是這樣。判斷鼠標(biāo)位置是否在dom節(jié)點(diǎn)的right左邊還是右邊 如果是左邊則大于0，否則小于0 如果鼠標(biāo)位置在dom節(jié)點(diǎn)right右邊面大于5px的時(shí)候則返回lastEl 節(jié)點(diǎn)
 ) && lastEl; // min delta
 }


 /**
 * Generate id
 * @param {HTMLElement} el
 * @returns {String}
 * @private
 */
 /***********************************************************************************************
 *函數(shù)名 ：_generateId
 *函數(shù)功能描述 ： 根據(jù)tag的name和class，src，href，文本內(nèi)容，來匹配生成唯一的標(biāo)識(shí)符
 *函數(shù)參數(shù) ： 
 el：dom節(jié)點(diǎn)
 *函數(shù)返回值 ：string
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/
 
 
 function _generateId(el) {
 var str = el.tagName + el.className + el.src + el.href + el.textContent,
 i = str.length,
 sum = 0;

 while (i--) {
 sum += str.charCodeAt(i);
 }

 return sum.toString(36); //生成36進(jìn)制
 }

 /**
 * Returns the index of an element within its parent for a selected set of
 * elements
 * @param {HTMLElement} el
 * @param {selector} selector
 * @return {number}
 */
 /***********************************************************************************************
 *函數(shù)名 ：_index
 *函數(shù)功能描述 ： 返回在其父范圍內(nèi)的元素的元素的索引
 *函數(shù)參數(shù) ： 
  el
 *函數(shù)返回值 ：number
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/
 
 function _index(el, selector) {
 var index = 0;
 
 //如果目標(biāo)節(jié)點(diǎn)不存在，或者目標(biāo)節(jié)點(diǎn)的父節(jié)點(diǎn)不存在則返回一個(gè) -1 就是當(dāng)前目標(biāo)節(jié)點(diǎn)如果是window 則返回-1
 if (!el || !el.parentNode) {
 return -1;
 }
 //el.previousElementSibling 獲取上一個(gè)節(jié)點(diǎn)
 
 /*
 TEMPLATE 標(biāo)簽 html5 模板標(biāo)簽 例子
 // 模板文本
<template id="tpl">
<img src="dummy.png" title="{{title}}"/>
</template>

// 獲取模板
<script type="text/javascript">
var tplEl = document.getElementById('tpl')
// 通過tplEl.innerText獲取也可以
var tpl = tplEl.innerHTML
tpl = tpl.replace(/^[\s\u3000]*|[\s\u3000]*$/, '')
Handlebars.compile(tpl)({title: 'test'})
</script>
 
 意思是當(dāng)節(jié)點(diǎn)是TEMPLATE標(biāo)簽的時(shí)候則表示該搜索標(biāo)簽已經(jīng)到達(dá)了最頂端
 */
 while (el && (el = el.previousElementSibling)) {
 if (el.nodeName.toUpperCase() !== 'TEMPLATE'
 && _matches(el, selector)) {
 index++;
 }
 }

 return index;
 }
 /***********************************************************************************************
 *函數(shù)名 ：_matches
 *函數(shù)功能描述 ： 匹配tag和tag，匹配clsss和tag，
 *函數(shù)參數(shù) ： 
 el：
 類型:obj，當(dāng)前拖拽節(jié)點(diǎn)dom
 selector:
 類型：string, tag或者clasname
 
 *函數(shù)返回值 ：
 類型：Boolean,真假，selector如果傳遞的是tag，則當(dāng)前的el的tag和selector的tag要同樣，或當(dāng)前的el的class含有selector 中的calss則返回真，否則返回假
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/
 function _matches(/**HTMLElement*/el, /**String*/selector) {
 /* 
 el 目標(biāo)節(jié)點(diǎn)
 selector = /[uo]l/i.test(el.nodeName) ? 'li' : '>*',
 selector=>*
 */
 if (el) {
 //split 字符串截取 //沒有.則返回為空 但是selector 的值還是原來的 li 但是selector 類型變成了數(shù)組
 //shift 刪除數(shù)組第一個(gè)字符串并返回該字符串
 //toUpperCase 把字符串變成大寫
 //整個(gè)思維是把一個(gè)字符串比如 ".aa .ccc .bbb .ddd" 然后提取到改class中的第一個(gè)變成大寫 AA
 selector = selector.split('.'); // 這里分割判斷是class還是tag
 
 var tag = selector.shift().toUpperCase(), // class
 
 //join 把數(shù)組["a","b","c"]變成a|b|c
 // (?=)會(huì)作為匹配校驗(yàn)，但不會(huì)出現(xiàn)在匹配結(jié)果字符串里面 就是前后必須要匹配有空格 但是不會(huì)匹配上空格
 //比如匹配 " aa bb cc " 匹配到 [aa,bb,cc]
 /* 
 \\s 與 (?=\\s) 前后必須要有空格，但是不會(huì)匹配上空格
 */
 re = new RegExp('\\s(' + selector.join('|') + ')(?=\\s)', 'g'); // 
 
 
 
 return (
 //tag === '' el.nodeName.toUpperCase() == tag
 //selector.length=2 tag === '' true
 //el.nodeName.toUpperCase() == tag 如果父節(jié)點(diǎn)是ul ol 則這里條件為真
 (tag === '' || el.nodeName.toUpperCase() == tag) &&
 //匹配 class 的長(zhǎng)度等于標(biāo)簽的長(zhǎng)度，。這里意思是在el中匹配的class含有selector的class就能匹配上
 (!selector.length || ((' ' + el.className + ' ').match(re) || []).length == selector.length)
 );
 }

 return false;
 }
 
 
 /***********************************************************************************************
 *函數(shù)名 ：_throttle
 *函數(shù)功能描述 ： 回調(diào)初始化一個(gè)函數(shù) 并且調(diào)用該回調(diào)函數(shù)
 *函數(shù)參數(shù) ： 
 callback：
 類型:function，回調(diào)函數(shù)
 ms:
 類型：number, 毫秒
 
 *函數(shù)返回值 ：
 類型：function，函數(shù)，可以用來聲明一個(gè)函數(shù)作用
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/
 function _throttle(callback, ms) {
 var args,
 _this;
 
 return function (/*有可能是n個(gè)參數(shù)*/) {
 
 if (args === void 0) {
 args = arguments; //arguments 就是callback中的callback 所以參數(shù)決定來源于它
 _this = this;
 //執(zhí)行回調(diào)函數(shù) 
 setTimeout(function () {
 if (args.length === 1) { //當(dāng)callback 函數(shù)一個(gè)參數(shù)的時(shí)候
 callback.call(_this, args[0]);
 } else {
 callback.apply(_this, args);//當(dāng)callback 函數(shù)多個(gè)參數(shù)的時(shí)候
 }
 args = void 0;
 }, ms);
 }
 };
 }
 /***********************************************************************************************
 *函數(shù)名 ：_extend
 *函數(shù)功能描述 ：類合并
 *函數(shù)參數(shù) ： 
 dst：類型：obj，子類 
 src：類型：obj，父類 
 *函數(shù)返回值 ： dst 子類
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/
 function _extend(dst, src) {
 if (dst && src) {
 for (var key in src) { //遍歷對(duì)象
 if (src.hasOwnProperty(key)) { //過濾原型
 dst[key] = src[key];
 }
 }
 }

 return dst;
 }


//聲明一個(gè)類utils
 // Export utils
 Sortable.utils = {
 on: _on, 
 off: _off,
 css: _css,
 find: _find,
 is: function (el, selector) {
 
 return !!_closest(el, selector, el);
 },
 extend: _extend,
 throttle: _throttle,
 closest: _closest,
 toggleClass: _toggleClass,
 index: _index
 };


 /**
 * Create sortable instance
 * @param {HTMLElement} el
 * @param {Object} [options]
 */
 /***********************************************************************************************
 *函數(shù)名 ：Sortable.create
 *函數(shù)功能描述 ：在類Sortable中添加多個(gè)一個(gè)方法，而調(diào)用Sortable構(gòu)造函數(shù)實(shí)例化給Sortable.create 屬性,創(chuàng)建了拖拽功能 
 *函數(shù)參數(shù) ： 
 el：類型：obj，拖拽列表的dom節(jié)點(diǎn)
 options：類型：obj，拖拽的參數(shù)
 *函數(shù)返回值 ： dst 子類
 *作者 ： 
 *函數(shù)創(chuàng)建日期 ：
 *函數(shù)修改日期 ：
 *修改人 ：
 *修改原因 ：
 *版本 ：
 *歷史版本 ：
 ***********************************************************************************************/

 Sortable.create = function (el, options) {
 return new Sortable(el, options);
 };


 // Export
 Sortable.version = '1.4.2'; //版本
 
 return Sortable;
});

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: