首頁技術(shù)文章正文

UI培訓之Html5拖拽效果

更新時間:2017-04-14 來源:黑馬程序員UI培訓學院 瀏覽量:

眾所周知，在目前炙手可熱的web開發(fā)中，html5更是首當其中，當然，我們說的html5包括（h5+c3+js+api）這些總和，有語義更強的h5標簽，有很給力的新增表單，及其音頻及其視頻的調(diào)用，canvas，本地存儲，強大的css3，過渡，動畫 3D效果等等令人眼花繚亂，那么，今天 我們就取這冰山一角的html5自帶拖拽來說說 ！！
 
之前的拖拽我們更多的是利用JS去做這件事情，但是，在最新的html5里面，我們就可以直接利用一個html5的拖拽API去實現(xiàn)這種效果，我們首先 來看下這些API
DataTransfer 對象：拖拽對象用來傳遞的媒介，使用一般為Event.dataTransfer。
draggable 屬性：就是標簽元素要設置draggable=true，否則不會有效果，例如：
<div title="拖拽我" draggable="true">我可以被拖拽喲?。?lt;/div>
ondragstart 事件：當拖拽元素開始被拖拽的時候觸發(fā)的事件，此事件作用在被拖曳元素上
ondragenter 事件：當拖曳元素進入目標元素的時候觸發(fā)的事件，此事件作用在目標元素上
ondragover 事件：拖拽元素在目標元素上移動的時候觸發(fā)的事件，此事件作用在目標元素上
ondrop 事件：被拖拽的元素在目標元素上同時鼠標放開觸發(fā)的事件，此事件作用在目標元素上
ondragend 事件：當拖拽完成后觸發(fā)的事件，此事件作用在被拖曳元素上
Event.preventDefault() 方法：阻止默認事件執(zhí)行。在ondragover中一定要執(zhí)行preventDefault()，否則ondrop事件不會被觸發(fā)。另外，如果是從其他應用軟件或是文件中拖東西進來，尤其是圖片的時候，默認的動作是顯示這個圖片或是相關(guān)信息，并不是真的執(zhí)行drop。此時需要用用document的ondragover事件把它直接干掉。
Event.effectAllowed 屬性：就是拖拽的效果。
利用這些API 我們就可以做一些列表也拖拽到垃圾桶的一個例子了
 
 
 
 
 
 
一共是這個三個步驟 實現(xià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>html5 drag & drop 拖拽與拖放測試</title>
<style>
body{font-size:84%;}
.dustbin{width:100px; height:260px; line-height:1.4; background-color:gray; font-size:36px; font-family:"微軟雅黑", "Yahei Mono"; text-align:center; text-shadow:-1px -1px #bbb; float:left;}
.dragbox{width:500px; padding-left:20px; float:left;}
.draglist{padding:10px; margin-bottom:5px; border:2px solid #ccc; background-color:#eee; cursor:move;}
.draglist:hover{border-color:#cad5eb; background-color:#f0f3f9;}
.dragremind{padding-top:2em; clear:both;}
</style>
</head>
 
<body>
<div class="dustbin"><br />垃<br />圾<br />箱</div>
<div class="dragbox">
<div class="draglist" title="拖拽我" draggable="true">列表1</div>
    <div class="draglist" title="拖拽我" draggable="true">列表2</div>
    <div class="draglist" title="拖拽我" draggable="true">列表3</div>
    <div class="draglist" title="拖拽我" draggable="true">列表4</div>
    <div class="draglist" title="拖拽我" draggable="true">列表5</div>
    <div class="draglist" title="拖拽我" draggable="true">列表6</div>
</div>
<div class="dragremind"></div>
<script>
var $ = function(selector) {
if (!selector) { return []; }
var arrEle = [];
if (document.querySelectorAll) {
arrEle = document.querySelectorAll(selector);
} else {
var oAll = document.getElementsByTagName("div"), lAll = oAll.length;
if (lAll) {
var i = 0;
for (i; i<lAll; i+=1) {
if (/^\./.test(selector)) {
if (oAll[i].className === selector.replace(".", "")) {
arrEle.push(oAll[i]);
}
} else if(/^#/.test(selector)) {
if (oAll[i].id === selector.replace("#", "")) {
arrEle.push(oAll[i]);
}
}
}
}
}
return arrEle;
};
 
var eleDustbin = $(".dustbin")[0], eleDrags = $(".draglist"), lDrags = eleDrags.length, eleRemind = $(".dragremind")[0], eleDrag = null;
for (var i=0; i<lDrags; i+=1) {
eleDrags[i].onselectstart = function() {
return false;
};
eleDrags[i].ondragstart = function(ev) {
ev.dataTransfer.effectAllowed = "move";
ev.dataTransfer.setData("text", ev.target.innerHTML);
ev.dataTransfer.setDragImage(ev.target, 0, 0);
eleDrag = ev.target;
return true;
};
eleDrags[i].ondragend = function(ev) {
ev.dataTransfer.clearData("text");
eleDrag = null;
return false
};
}
eleDustbin.ondragover = function(ev) {
ev.preventDefault();
return true;
};
 
eleDustbin.ondragenter = function(ev) {
this.style.color = "#ffffff";
return true;
};
eleDustbin.ondrop = function(ev) {
if (eleDrag) {
eleRemind.innerHTML = '<strong>"' + eleDrag.innerHTML + '"</strong>被扔進了垃圾箱';
eleDrag.parentNode.removeChild(eleDrag);
}
this.style.color = "#000000";
return false;
};
</script>
</body>
</html>

本文版權(quán)歸傳智播客UI培訓學院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者出處。謝謝！
作者：黑馬程序員UI培訓學院
首發(fā)：http://m.ko1818.cn/news/ui.html 

分享到：
在線咨詢 我要報名
和我們在線交談！