先看看效果
完整測試**：
html5 拖拽
#boxdrag的英譯是 拖、拽 ；drop的意思是 放下
drag和drop 是html5中新增的特性，任何元素都能夠拖放
。大部分主流瀏覽器目前也夠支援html5的拖放功能。
1. 我們想要拖動那個元素，首先要把這個元素設定成可拖拽，
將該元素的
draggable 屬性設定為 true。
有三個值true,false,auto. true可以拖，false不可以，auto由使用者瀏覽器是否支援而定。
例如例子中當通過滑鼠拖**標的時候就會觸發
ondragstart
事件，這個事件觸發
handledragstart
這個函式。
function handledragstart(e)拖動img
時，瀏覽器會呼叫setdata()方法，將
被拖動的
img的id值以
」text」格式儲存在datatransfer物件中
。（注：
儲存在datatransfer物件中的資料只能在ondrop事件觸發的函式中getdata來讀取
）。關於
datatansfer
物件的屬性和方法的詳細介紹請看本文結尾！
3. 拖動元素之後，要把元素放到**？所以要設定目標元素，例子中是要把拖動的元素放入box這個div中，所以給div新增了ondragover事件,該事件觸發了allowdrop(e)這個函式。
function allowdrop(e)事件規定在何處
可以放置被拖動的元素。（預設地，無法將資料
/元素放置到其他元素中。如果需要設定允許放置，
則必須阻止對元素的預設事件，即：若想觸發ondrop事件，
ondragover 中
必須阻止預設事件。）所以
allowdrop(e)
函式裡通過
e.preventdefault()阻止了預設行為。
4. 我們知道了要把元素放到box這個div裡，而當我們放下元素時發生 ondrop事件，所以要在box這個div裡設定ondrop事件，該事件觸發handledrop(event)這個函式。
function handledrop(e)接著通過document.getelementbyid(src)獲取的被拖元素
被拖元素
（img
）追加到目標元素
（div）中。
注： 在firefox 3.5+中，如果是把影象拖放到放置目標上，頁面就會轉向影象檔案；而如果是把文字拖放到放置目標上，則會導致無效url錯誤，因此，為了讓firefox支援正常的拖放，
還要取消drop事件的預設行為
，阻止它開啟url。
最後詳細介紹下：datatransfer物件
以下內容參考了：
datatransfer物件是事件物件的乙個屬性，
用於從被拖拽元素向目標
元素傳遞字串格式的資料。因為它是事件物件的屬性，所以只
有在獲取到事件物件的前體下才能
訪問datatransfer物件。
datatransfer物件有兩個主要的方法：getdata()方法和setdata()方法。setdata()方法的第乙個引數，也是getdata()方法唯一的乙個引數，是
用來儲存資料型別的
字串，取值是」text」或」url」。
將資料儲存在文字
「text
」和儲存為url是有區別的。如果將資料儲存為文字格式，那麼資料不會得到任何特殊處理。如果儲存為url格式，瀏覽器會將其當成網頁中的鏈結。如果你將這個url放置到另乙個瀏覽器視窗中，就可以開啟該url。
datatransfer物件
的dropeffect屬性和effectallowed屬性
運用datatransfer物件，不僅僅能傳輸資料，還能通過datatransfer物件確定被拖拽元素以及目標的元素能夠接收什麼操作。要實現這樣的功能就用到了dropeffect屬性和effectallowed屬性。
通過dropeffect屬性可以知道被拖動的元素能夠執行哪種行為。
有四個值
none：不能把拖動的元素放在這裡。這是除了文字框之外所有元素預設的值。
move：應該把拖動的元素
移動到放置目標。
copy：應該把拖動的元素
複製到放置目標。
把元素拖動到目標
元素上的時候，以上每乙個值都會導致游標顯示為不同的符號。光有dropeffect屬性是不咋管用的。只有結合effectallowed屬性一起使用才能發揮功效。effectallowed屬性表示允許拖動元素的哪種
(dropeffect)
行為。effectallowed屬性也有很多值，其值如下：
uninitialized：沒有給被拖動元素設定任何放置行為。
none：被拖動的元素不能有任何行為。
copy：只允許值為」copy」的dropeffect。
link：只允許值為」link」的dropeffect。
move：只允許值為」move」的dropeffect。
copylink：允許值為」copy」和」link」的dropeffect。
copymove：允許值為」copy」和」move」的dropeffect。
linkmove：允許值為」link」和」move」的dropeffect。
all：允許任意dropeffect。
注 ：
要設定effectallowed屬性必須在ondragstart事件觸發的函式中設定
HTML5之拖拽功能
預設可拖動元素 draggable屬性 其他元素該屬性值為true，則可被拖動。chrome 可直接顯示拖動效果 firefox 需要為ondragstart事件指定 攜帶資料，才能顯示拖動效果。dragelement.ondragstart function evt 阻止放置物件的預設 drope...
html5 初探2 表單
乙個簡單的表單 by xufei 2013 04 css樣式，裡面有些 css3的東西 charset utf 8 body header footer select input content form 表單分組 form fieldset 表單分組 最後乙個 form fieldset last...
今天來說說html5的拖拽
先看demo datatransfer物件 退拽物件用來傳遞的媒介，使用一般為event.datatransfer draggable 給拖拽元素的draggable屬性設定成true 表示該元素可以進行拖拽了 ondragstart事件 拖拽元素開始拖拽的時候觸發的 ondragover事件 拖拽...