整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
拖拽 Making Elements Draggable
The drag and drop feature lets you "grab" an object and drag it to a different location.To make an element draggable, just set the draggableattribute to true:
Any HTML element can be draggable.
The API for HTML5 drag and drop is event-based.
HTML5拖放API是基于事件的。
<!DOCTYPE HTML><html><head><script>function allowDrop(ev) {ev.preventDefault();}function drag(ev) {ev.dataTransfer.setData("text", ev.target.id);}function drop(ev) {ev.preventDefault();var data = ev.dataTransfer.getData("text");ev.target.appendChild(document.getElementById(data));}</script></head><body><div id="box" ondrop="drop(event)"ondragover="allowDrop(event)"style="border:1px solid black; width:200px; height:200px"></div><img id="image" src="sample.jpg" draggable="true"ondragstart="drag(event)" width="150" height="50" alt="" /></body></html>
2 拖動什么 What to Drag
When the element is dragged, the ondragstartattribute calls a function, drag(event), which specifies what data is to be dragged.The dataTransfer.setData()method sets the data type and the value of the dragged data:
當元素被拖動時，ondragstart屬性調用一個函數drag（event），它指定要拖動的數據。
dataTransfer.setData（）方法設置數據類型和拖動數據的值：
在我們的示例中，數據類型為“text”，值為可拖動元素的ID（“image”）。
3 Where to Drop
The ondragoverevent specifies where the dragged data can be dropped. By default, data and elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element.
This is done by calling the event.preventDefault() method for the ondragoverevent.
ondragover事件指定可以刪除拖動數據的位置。 默認情況下，數據和元素不能在其他元素中刪除。 為了允許一個drop，我們必須防止該元素的默認處理。
這可以通過調用ondragover事件的event.preventDefault（）方法來完成。
3 Where to Drop
The ondragoverevent specifies where the dragged data can be dropped. By default, data and elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element.This is done by calling the event.preventDefault() method for the ondragoverevent.
ondragover事件指定可以刪除拖動數據的位置。 默認情況下，數據和元素不能在其他元素中刪除。 為了允許一個drop，我們必須防止該元素的默認處理。
這可以通過調用ondragover事件的event.preventDefault（）方法來完成。
3 Do the Drop
When the dragged data is dropped, a drop event occurs.In the example above, the ondropattribute calls a function, drop(event):
當拖放的數據被丟棄時，會發生丟棄事件。
在上面的例子中，ondrop屬性調用一個函數drop（event）：
The preventDefault() method prevents the browser's default handling of the data (default is open as link on drop).
preventDefault（）方法阻止瀏覽器對數據的默認處理（默認為打開鏈接）。
The dragged data can be accessed with the dataTransfer.getData() method. This method will return any data that was set to the same type in the setData() method.The dragged data is the ID of the dragged element ("image").
可以使用dataTransfer.getData（）方法訪問拖動的數據。 該方法將返回在setData（）方法中設置為相同類型的任何數據。
拖動的數據是拖動元素的ID（“image”）。At the end, the dragged element is appended into the drop element, using the appendChild() function.
最后，使用appendChild（）函數將拖動的元素附加到放置元素中。
簡介】
拖放是一種常見的特性, 屬于html5標準的一部分, 即抓取對象以后拖動到另一個位置, 在html5中, 任何元素都可被設置拖放。首先, 我們要給需要拖動的HTML元素啟用拖動功能, 設置屬性draggable="true",
<div draggable="true"></div>
提示：a標簽和img標簽默認是啟用該屬性的, 可不需要設置draggable屬性。
draggable有三個值, 如下所示：
draggable = true(元素可以被拖動)
draggable = false(元素不能被拖動)
draggable = auto(瀏覽器可以自主決定某個元素是否可以被拖動)
【用法】
當我們用鼠標拖拽目標元素過程中會觸發的事件：
ondragstart：用戶按下鼠標開始拖動時觸發
ondrag：用戶正在拖動時反復觸發
ondragend：用戶結束拖動后觸發
<img id="imgs" ondragstart="startFun()" ondrag="ondragFun()" ondragend="ondragendFun()" src="../img/a.png"/>
當拖動元素進入目標容器內觸發的事件：
ondragenter：鼠標拖動對象進入釋放區時觸發
ondragover：被拖動物體進入目標容器內移動時反復觸發
ondragleave：拖動對象在釋放區沒有釋放就離開容器時觸發
ondrop：被拖動物體在目標容器內釋放時觸發
<div id="container" ondragenter="ondragenterFun(event)" ondragover="ondragoverFun(event)" ondragleave="ondragleaveFun()" ondrop="drop()"></div>
ondragenter和ondragover事件的默認行為是拒絕接受任何被拖放的項目, 所以我們必須要做的最重要的事情就是防止這種默認行為的發生。
因此, 我們只需要在這兩個事件調用的函數中傳入event對象, 使用event.preventDefault()就可取消這種默認行為；舉個例子, 在drop事件時, Firefox瀏覽器會關閉網頁, 轉而顯示被拖動圖片img元素src所引用的地址。
取消元素默認行為：
function ondragenterFun(e){
e.preventDefault();
}
function ondragoverFun(e){
e.preventDefault();
}
在event對象中, 我們會使用dataTransfer屬性來獲取DataTransfer對象, 在DataTransfer對象中有我們操作數據的屬性和方法, 具體如下：
datatransfer：轉移釋放元素的數據到釋放區, 返回Datatransfer對象
event.dataTransfer //返回DataTransfer對象
DataTransfer對象的屬性：
files：處理從操作系統拖動并釋放到釋放區的文件；
types：返回一個字符串數組, 該對象包含了dataTransfer對象中數據的所有類型；
items：返回DataTransferItems對象, 該對象代表了拖動數據；
dropEffect：設置拖放目標允許發生的拖放行為, 如果此處設置的拖放行為不在effectAllowed屬性設置的可拖放行為內, 拖放操作將會失敗。該屬性值只允許為"null"、"copy"、"link"或"move"；
effectAllowed：設置拖動元素允許發生的拖動行為, 該屬性值可為"none"、"copy"、"copyLink"、"copyMove"、"link"、"linkMove"、"move"、"all"或"uninitialized"；
DataTransfer對象的方法：
setData( format , data )：將指定格式的數據賦值給dataTransfer對象，參數format定義數據的格式也就是數據的類型，data為待賦值的數據。
getData( format )：從dataTransfer對象中獲取指定格式的數據，format代表數據格式，data為數據。
clearData( [format] )：從dataTransfer對象中刪除指定格式的數據，參數可選，若不給參數，將刪除對象中所有的數據。
setDragImage(el, x, y)：設置拖放操作的圖標，其中el代表自定義圖標，x代表圖標與鼠標在水平方向上的距離，y代表圖標與鼠標在垂直方向上的距離。
了解了H5拖動使用的api以后我們接下來看一個綜合的案例, 功能如下：
1)、實現圖片拖動功能；
2)、實現圖片復制功能；
3)、過濾不能拖動的元素；
4)、實現拖動本地圖片到瀏覽器指定位置；
公共css部分：
<style>
#dropIn{
border:1px solid #AAAAAA;
height:100px;
margin-bottom: 10px;
padding: 10px;
}
#dropIn>img{
margin-right: 10px;
border:2px solid deepskyblue;
}
img{
width:100px;
border-radius: 10px;
border:2px solid red;
}
</style>
html部分：
<body>
<div id="dropIn"></div> <!--釋放區-->
<img id="drop1" src="img/a.png" alt="" />
<!--拖動的圖片元素-->
</body>
js部分：
<script type="text/javascript">
var darggID;
function getId(el){
return document.getElementById(el)
}
var dropId1 = getId("drop1");
var dropInId = getId("dropIn");
//取消事件默認行為
dropInId.ondragenter = cancelDefault;
dropInId.ondragover = cancelDefault; //綁定拖動元素釋放時觸發的事件
dropInId.ondrop = drop; //綁定
dropId1.ondragstart = startFun;
function cancelDefault(ev){ //取消默認行為
ev.preventDefault();
}
function startFun(ev){
darggID = ev.target.id;
//獲取被拖動元素的id
//從源對象上的事件處理中保存數據，數據類型為"Text"
ev.dataTransfer.setData("Text",darggID);
}
function drop(ev){
ev.preventDefault();
// 從目標對象上的事件處理中讀取"Text"類型數據
var data=ev.dataTransfer.getData("Text");
// 插入到目標對象中
ev.target.appendChild(document.getElementById(data));
}
</script>接下來我們添加兩張圖, "drop2"是實現復制的圖片, "drop3"是既不能復制也不能拖動的圖片；
<img id="drop2" src="img/b.png" alt="" /><img id="drop3" src="img/c.png" alt="" />
添加js代碼：
//獲取頁面元素
var dropId2 = getId("drop2");
var dropId3 = getId("drop3");
//綁定事件
dropId2.ondragstart = startFun;dropId3.ondragstart = startFun;
//修改drop函數為
function drop(ev){
ev.preventDefault();
// 從目標對象上的事件處理中讀取"Text"類型數據
var data=ev.dataTransfer.getData("Text");
if(data=='drop1'){
//移動
ev.target.appendChild(document.getElementById(data));
}
if(data=='drop2'){//復制
var nreEl=document.getElementById(darggID).cloneNode(false);
getId("dropIn").appendChild(nreEl);
}
if(data=='drop3'){//過濾drop3，drop3不做任何操作
alert('過濾drop3')
}
}
接下來我們實現拖動本地圖片到瀏覽器, 我們就將圖片拖動到id為"dropIn"的這個div中；添加js:
/*document 監聽drop 并阻止瀏覽器打開客戶端的圖片*/
document.ondragover = function (e) {
//只有在ondragover中阻止默認行為
e.preventDefault();
};
document.ondrop = function (e) {
//阻止 document.ondrop的默認行為
e.preventDefault();
};
//dropIn是div的id
dropIn.ondrop = function (e) {
var list = e.dataTransfer.files;
for (var i = 0; i < list.length; i++) {
var f = list[i];
reader(f);
}
};
function reader(f) {
var reader = new FileReader();
//讀取數據
reader.readAsDataURL(f);
reader.onload = function () {
var img = new Image();
img.src = reader.result;
dropIn.appendChild(img);
}
}
【瀏覽器支持】
目前只有Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari5支持拖放，在 Safari5.1.2 中不支持拖放。
最后再和大家分享一個技巧, 這種拖動行為還能跨瀏覽器工作, 這里說的跨瀏覽器不是瀏覽器之間的跨窗口, 而是可以從Chrome瀏覽器拖動到Firefox瀏覽器, 因為拖放功能的支持是集成在操作系統里面的, 有著相同的特性。
5中拖拽屬性：
draggable： auto | true | false
拖動事件：
- dragstart 在元素開始被拖動時觸發
- dragend 在拖動操作完成時觸發
- drag 在元素被拖動時觸發
釋放區事件：
dragenter 被拖動元素進入到釋放區所占據得屏幕空間時觸發
dragover 當被拖動元素在釋放區內移動時觸發
dragleave 當被拖動元素沒有放下就離開釋放區時觸發
drop 當被拖動元素在釋放區里放下時觸發
案例： 實現div拖拽到指定區域效果：
效果：
初始效果：
拖拽過程中的效果：
拖拽到釋放去 釋放后的效果：
下面是這個操作的代碼
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
