HTML5 如何實現拖放‘N‘拖放
這不是一項新技術，它已存在多年，但許多開發人員仍然執著於基於jQuery的舊方法，以牽連復雜（有時很慢且不準確）的拖放模擬。
現在HTML5包含一個拖放API，您已經有了一個非常簡單的方法來實現無拖放拖放。
理解力學
拖放很容易理解。你有一個物體和一個目標。目標是允許用戶點擊對象並將其拖動到目標，然後您的應用程序需要做出適當的響應。
創建一個網頁模板
這很簡單，但我們需要有一個地方來放置所有的代碼項目。您可以創建的最基本的網頁模板是：
<！DOCTYPE html>
< html >
< head >
< body >
</ body >
</ html >
定義一個可拖動的對象
你可能期望在這裏有一些復雜的類似Java的定義，但實際上它就像在你的body部分的一個元素上設置一個“可拖動”屬性一樣簡單，就像這樣：
<div>
< img id = “dragMe” src = “pic.jpg” draggable = “true” >
</ div >
正如你所看到的那樣，這部分非常簡單。事實上，對於某些瀏覽器，您甚至不需要為某些元素類型指定屬性，但無論如何，仍然是一個好主意。
定義目標
目標是可以將對象拖到的區域。同樣，這很簡單，你只需要給目標一個CSS ID屬性。
<div id = “drop_target” >
×××離開！
</ div >
添加一些CSS
我們應該確保一切都看起來應該看起來。將以下CSS樣式信息添加到您的頭部部分：
<風格>
#drop_target { border：3 px solid＃000 ; 填充：10像素; 身高：100像素; 寬度：100像素;}
#dragMe { height：50 px; width：50 px;}
< / style>
實現JS功能
這一步只是為了確保你的應用程序知道對象的存在，並且它應該與它們交互。如果您需要創建一系列事件偵聽器，則可以采取復雜的方法，但您並不需要任何精心處理基本拖放操作的內容。
真的，我們只需要定義兩個函數來處理所有的移動，dragObject和dropObject。
<script>
var moved = false ;
函數 dragObject（e） {
e.dataTransfer.effectAllowed = “移動” ;
e.dataTransfer.setData（“obj1”，e.target.id）;
返回 false ;
}
function dropObject（e） {
if（moved == true）{
return false ;
}
var received = e.dataTransfer.getData（“obj1”）;
e.dataTransfer.dropEffect = “move” ;
e.preventDefault（）;
e.stopPropagation（）;
e.target.appendChild（document.getElementById（received））;
移動= 真 ;
返回 false ;
}
< / script>
例如，有關防止默認值和停止傳播的內容只是為了覆蓋默認的瀏覽器行為，例如可能導致它嘗試在某處導航或打開圖像。已移動的變量可防止在執行操作後執行代碼。
修改對象聲明和目標聲明
如果功能從未被調用，則不會發生任何事情。你只需要像這樣改變對象和目標的聲明：
<img id = “dragMe” src = “pic.jpg” draggable = “true” ondragstart = “dragObject（event）;” >
和
<div id = “drop_target” ondragover = “event.preventDefault（）;” ondrop = “dropObject（
HTML5 如何實現拖放‘N‘拖放