一、html5現在已經提供支援拖動和拖放的api了，所以，支援html5的瀏覽器可以不必折騰了，直接使用吧。
關於html5的拖拽api 請檢視
以下摘錄一些 比較重要的物件和事件以及屬性
* 首先，要使元素能否能被拖拽，必須設定 draggable = "true" 例如：只有設定draggable才可以被拖拽
* 乙個很很重要的介面 datatransfer，它是拖拽物件用來傳遞的媒介，它包含以下屬性和方法
drag & drop 包括以下事件：
注意：在ondragover中一定要執行preventdefault()，否則ondrop事件不會被觸發。另外，如果是從其他應用軟體或是檔案中拖東西進來，尤其是的時候，預設的動作是顯示這個或是相關資訊，並不是真的執行drop。此時需要用用document的ondragover事件把它直接乾掉。
下面我們來模擬乙個購物車，將各種東西拖進到購物車裡面去。
首先看乙個截圖
可以將商品往購物車裡面拖動，當然你可以將購物車的東西拖出來。**如下，裡面都做了注釋了，分析已經很詳細了。
>購物車demo
title
>
<
style
>
.mod-buy
.mod-buy .inbox
.mod-buy .outbox
.mod-buy .list
.mod-buy .list:hover
style
>
head
>
<
body
>
<
div
class
="mod-buy"
>
<
h3>購物車
h3>
<
div
class
="inbox"
>
div>
<
h3>商品資訊
h3>
<
div
class
="outbox"
>
<
div
class
="list"
title
="物品1"
draggable
="true"
>物品1
div>
<
div
class
="list"
title
="物品2"
draggable
="true"
>物品2
div>
<
div
class
="list"
title
="物品3"
draggable
="true"
>物品3
div>
<
div
class
="list"
title
="物品4"
draggable
="true"
>物品4
div>
<
div
class
="list"
title
="物品5"
draggable
="true"
>物品5
div>
<
div
class
="list"
title
="物品6"
draggable
="true"
>物品6
div>
<
div
class
="list"
title
="物品7"
draggable
="true"
>物品7
div>
<
div
class
="list"
title
="物品8"
draggable
="true"
>物品8
div>
<
div
class
="list"
title
="物品9"
draggable
="true"
>物品9
div>
<
div
class
="list"
title
="物品10"
draggable
="true"
>物品10
div>
<
div
class
="list"
title
="物品11"
draggable
="true"
>物品11
div>
div>
div>
<
script
>
(function
()var
arrelement =;
if(document.queryselectorall)
else
} elseif(
/^/.test(selector)) }}
}return
arrelement;
};var
inbox =$(
".inbox",
"div")[
0],outbox =$(
".outbox",
"div")[
0],dragsele =$(
"div",
".list
"),
draglen
=dragsele.length,
eledrag
=null
;
//為拖拽的元素繫結事件
for(
vari=0
; i<
draglen; i+=1
) ;//
該元素開始拖動的時候
dragsele[i].ondragstart
=function
(ev) ;
//該物件結束拖動的時候
dragsele[i].ondragend
=function
(ev) ;}//
拖動該物件到目標物件上移動的時候
inbox.ondragover
=function
(ev) ;
//進入目標物件的時候
inbox.ondragenter
=function
(ev) ;
//放開手的時候
inbox.ondrop
=function
(ev) ;
outbox.ondragover
=function
(ev) ;
outbox.ondragenter
=function
(ev) ;
outbox.ondrop
=function
(ev) ;
})();
script
>
body
>
html
>
下文再繼續講解不支援html5的方法拖拽。我不會採用任何的庫，而是用最原始的辦法來實現，這將是最土鱉的方法，但是能體現拖動的原理。
拖拽效果的實現原理分析2
上文對html5支援的瀏覽器的拖拽效果進行了分析，本文不採用任何庫，來分析下拖拽的過程 先想想我們平時拖拽是怎麼操作的，大致可以分為幾下幾個步驟 滑鼠按下，滑鼠移動，拖拽，被拖動的物件跟著走 滑鼠鬆開，物件停止，無拖動了 計算距離，拖拽的距離 滑鼠移動 對應在事件上就是 onmousedown，on...
拖拽效果的實現原理分析2
上文對html5支援的瀏覽器的拖拽效果進行了分析，本文不採用任何庫，來分析下拖拽的過程 先想想我們平時拖拽是怎麼操作的，大致可以分為幾下幾個步驟 滑鼠按下，滑鼠移動，拖拽，被拖動的物件跟著走 滑鼠鬆開，物件停止，無拖動了 計算距離，拖拽的距離 滑鼠移動 對應在事件上就是 onmousedown，on...
拖拽效果的實現原理分析2
上文對html5支援的瀏覽器的拖拽效果進行了分析，本文不採用任何庫，來分析下拖拽的過程 先想想我們平時拖拽是怎麼操作的，大致可以分為幾下幾個步驟 滑鼠按下，滑鼠移動，拖拽，被拖動的物件跟著走 滑鼠鬆開，物件停止，無拖動了 計算距離，拖拽的距離 滑鼠移動 對應在事件上就是 onmousedown，on...