html5 拖動(dòng)效果在手機(jī)上實(shí)現(xiàn)方法是調(diào)用drag和drop一系列函數(shù)實(shí)現(xiàn)的。
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、網(wǎng)頁(yè)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、紅旗網(wǎng)站維護(hù)、網(wǎng)站推廣。
注意：拖拽源在拖拽操作結(jié)束將得到dragend事件對(duì)象，不管操作成功與否。
舉例：
定義可拖放內(nèi)容
div id="columns"
div class="column" draggable="true"headerA/header/div
div class="column" draggable="true"headerB/header/div
div class="column" draggable="true"headerC/header/div
/div
2、監(jiān)聽拖動(dòng)事件
可附加大量不同事件以監(jiān)聽整個(gè)拖放過程：
dragstart
drag
dragenter
dragleave
dragover
drop
dragend
a.這里是開始拖拽
function handleDragStart(e) {
this.style.opacity = '0.4'; ?// this / e.target is the source node.
}
var cols = document.querySelectorAll('#columns .column');
[].forEach.call(cols, function(col) {
col.addEventListener('dragstart', handleDragStart, false);
});
b.dragenter、dragover?和?dragleave?事件處理程序可用于在拖動(dòng)過程中提供額外的可視化提示。例如，在拖動(dòng)期間將鼠標(biāo)懸停在某一列上方時(shí)，其邊框可能會(huì)變成虛線。這樣，用戶就能知道這些列也是放置的目標(biāo)區(qū)域。
一、前面的話
HTML5提供專門的拖拽與拖放的API，以后實(shí)現(xiàn)這類效果就不必亂折騰了。但是，考慮到Opera瀏覽器似乎對(duì)此不感冒，在通用性上有待商榷，所以這里也就簡(jiǎn)單說一說。
二、相關(guān)重點(diǎn)
DataTransfer?對(duì)象：退拽對(duì)象用來傳遞的媒介，使用一般為Event.dataTransfer。
draggable?屬性：就是標(biāo)簽元素要設(shè)置draggable=true，否則不會(huì)有效果，例如：
div title="拖拽我" draggable="true"列表1/div
ondragstart?事件：當(dāng)拖拽元素開始被拖拽的時(shí)候觸發(fā)的事件，此事件作用在被拖曳元素上
ondragenter?事件：當(dāng)拖曳元素進(jìn)入目標(biāo)元素的時(shí)候觸發(fā)的事件，此事件作用在目標(biāo)元素上
ondragover?事件：拖拽元素在目標(biāo)元素上移動(dòng)的時(shí)候觸發(fā)的事件，此事件作用在目標(biāo)元素上
ondrop?事件：被拖拽的元素在目標(biāo)元素上同時(shí)鼠標(biāo)放開觸發(fā)的事件，此事件作用在目標(biāo)元素上
ondragend?事件：當(dāng)拖拽完成后觸發(fā)的事件，此事件作用在被拖曳元素上
Event.preventDefault()?方法：阻止默認(rèn)的些事件方法等執(zhí)行。在ondragover中一定要執(zhí)行preventDefault()，否則ondrop事件不會(huì)被觸發(fā)。另外，如果是從其他應(yīng)用軟件或是文件中拖東西進(jìn)來，尤其是圖片的時(shí)候，默認(rèn)的動(dòng)作是顯示這個(gè)圖片或是相關(guān)信息，并不是真的執(zhí)行drop。此時(shí)需要用用document的ondragover事件把它直接干掉。
Event.effectAllowed?屬性：就是拖拽的效果。
三、相關(guān)實(shí)例
為了便于理解上面的粗體的事件啊對(duì)象啊什么的，做了個(gè)很簡(jiǎn)單的demo頁(yè)面。
您可以狠狠地點(diǎn)擊這里：HTML5 drag drop刪除元素demo
此demo實(shí)現(xiàn)的效果是把右側(cè)的列表拖動(dòng)到左側(cè)的寫著果敢的“垃圾箱”三個(gè)字的div層上，此列表元素就會(huì)從這個(gè)星球上消失。如下截圖連環(huán)畫所示：
源代碼展示
其中HTML結(jié)構(gòu)如下：
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
JS代碼如下：
var $ = function(selector) { ? ?/*簡(jiǎn)單的選擇器方法*/
...};
var eleDustbin = $(".dustbin")[0], eleDrags = $(".draglist"), lDrags = eleDrags.length, eleRemind = $(".dragremind")[0], eleDrag = null;
for (var i=0; ilDrags; 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) { ? ? ? ?/*拖拽結(jié)束*/
?ev.dataTransfer.clearData("text");
?eleDrag = null;
?return false
};
}
eleDustbin.ondragover = function(ev) { ? ?/*拖拽元素在目標(biāo)元素頭上移動(dòng)的時(shí)候*/
ev.preventDefault();
return true;
};
eleDustbin.ondragenter = function(ev) { ? ?/*拖拽元素進(jìn)入目標(biāo)元素頭上的時(shí)候*/
this.style.color = "#ffffff";
return true;
};
eleDustbin.ondrop = function(ev) { ? ?/*拖拽元素進(jìn)入目標(biāo)元素頭上，同時(shí)鼠標(biāo)松開的時(shí)候*/
if (eleDrag) {
?eleRemind.innerHTML = 'strong"' + eleDrag.innerHTML + '"/strong被扔進(jìn)了垃圾箱';
?eleDrag.parentNode.removeChild(eleDrag);
}
this.style.color = "#000000";
return false;
};
一個(gè)完整的drag and drop流程通常包含以下幾個(gè)步驟:
1.設(shè)置可拖拽目標(biāo).設(shè)置屬性draggable="true"使元素編程可拖拽對(duì)象.
2.監(jiān)聽dragstart設(shè)置拖拽數(shù)據(jù)
3.為拖拽操作設(shè)置反饋圖標(biāo)(可選)
4.設(shè)置允許的拖放效果,如copy,move,link
5.設(shè)置拖放目標(biāo),默認(rèn)情況下瀏覽器阻止所有的拖放操作,所以需要監(jiān)聽dragenter或者dragover取消瀏覽器默認(rèn)行為使元素可拖放.
6.監(jiān)聽drop事件執(zhí)行所需操作
這些是HTML5的新特性，如果你想了解更有相關(guān)的知識(shí)，你可以在一個(gè)叫做秒秒學(xué)的網(wǎng)站查找相關(guān)資料。
HTML 5 拖放
HTML5 音頻
HTML5 畫布
拖放（Drag 和 drop）是 HTML5 標(biāo)準(zhǔn)的組成部分。
拖放
拖放是一種常見的特性，即抓取對(duì)象以后拖到另一個(gè)位置。
在 HTML5 中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放。
瀏覽器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注釋：在 Safari 5.1.2 中不支持拖放。
HTML5 拖放實(shí)例
下面的例子是一個(gè)簡(jiǎn)單的拖放實(shí)例：
實(shí)例
!DOCTYPE HTML
html
head
script type="text/javascript"
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="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"/div
img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" /
/body
/html
親自試一試
它看上去也許有些復(fù)雜，不過我們可以分別研究拖放事件的不同部分。
設(shè)置元素為可拖放
首先，為了使元素可拖動(dòng)，把 draggable 屬性設(shè)置為 true ：
img draggable="true" /
拖動(dòng)什么 - ondragstart 和 setData()
然后，規(guī)定當(dāng)元素被拖動(dòng)時(shí)，會(huì)發(fā)生什么。
在上面的例子中，ondragstart 屬性調(diào)用了一個(gè)函數(shù)，drag(event)，它規(guī)定了被拖動(dòng)的數(shù)據(jù)。
dataTransfer.setData() 方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在這個(gè)例子中，數(shù)據(jù)類型是 "Text"，值是可拖動(dòng)元素的 id ("drag1")。
放到何處 - ondragover
ondragover 事件規(guī)定在何處放置被拖動(dòng)的數(shù)據(jù)。
默認(rèn)地，無法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置，我們必須阻止對(duì)元素的默認(rèn)處理方式。
這要通過調(diào)用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
進(jìn)行放置 - ondrop
當(dāng)放置被拖數(shù)據(jù)時(shí)，會(huì)發(fā)生 drop 事件。
在上面的例子中，ondrop 屬性調(diào)用了一個(gè)函數(shù)，drop(event)：
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
代碼解釋：
調(diào)用 preventDefault() 來避免瀏覽器對(duì)數(shù)據(jù)的默認(rèn)處理（drop 事件的默認(rèn)行為是以鏈接形式打開）
通過 dataTransfer.getData("Text") 方法獲得被拖的數(shù)據(jù)。該方法將返回在 setData() 方法中設(shè)置為相同類型的任何數(shù)據(jù)。
被拖數(shù)據(jù)是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目標(biāo)元素）中
在拖放的過程中會(huì)觸發(fā)以下事件：
在拖動(dòng)目標(biāo)上觸發(fā)事件 (源元素)
ondragstart?- 用戶開始拖動(dòng)元素時(shí)觸發(fā)
ondrag?- 元素正在拖動(dòng)時(shí)觸發(fā)
ondragend?- 用戶完成元素拖動(dòng)后觸發(fā)
釋放目標(biāo)時(shí)觸發(fā)的事件
ondragenter?- 當(dāng)被鼠標(biāo)拖動(dòng)的對(duì)象進(jìn)入其容器范圍內(nèi)時(shí)觸發(fā)此事件
ondragover?- 當(dāng)某被拖動(dòng)的對(duì)象在另一對(duì)象容器范圍內(nèi)拖動(dòng)時(shí)觸發(fā)此事件
ondragleave?- 當(dāng)被鼠標(biāo)拖動(dòng)的對(duì)象離開其容器范圍內(nèi)時(shí)觸發(fā)此事件
ondrop?- 在一個(gè)拖動(dòng)過程中，釋放鼠標(biāo)鍵時(shí)觸發(fā)此事件
event對(duì)象（以e代替）
e.target
W3Cschool上的解釋是：返回觸發(fā)此事件的元素（事件的目標(biāo)節(jié)點(diǎn)），這個(gè)target屬性只兼容ie9及以上
e.preventDefault()
取消事件的默認(rèn)動(dòng)作。
e.dataTransfer.setData()
設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值。
e.dataTransfer.getData()
獲得被拖的數(shù)據(jù)。
在拖動(dòng)和拖放過程中會(huì)涉及到兩個(gè)對(duì)象，一個(gè)是被拖動(dòng)的drag對(duì)象，一個(gè)是drop對(duì)象（拖放容器對(duì)象）。 在拖動(dòng)和拖放這一過程中會(huì)發(fā)生七大事件。下面是對(duì)這七大事件的簡(jiǎn)單介紹：
事件名稱 作用對(duì)象 作用對(duì)象
Dragstar事件 被拖動(dòng)的drag對(duì)象。 當(dāng)對(duì)象開始拖動(dòng)時(shí)觸發(fā)。
Drag事件 被拖動(dòng)的drag對(duì)象。 在Drag對(duì)象被拖動(dòng)期間連續(xù)觸發(fā)。
Dragend事件 被拖動(dòng)的drag對(duì)象。 在Drag對(duì)象拖動(dòng)到Drop目標(biāo)對(duì)象上時(shí)被觸發(fā)。
Dragenter事件 drop對(duì)象 在Drag對(duì)象拖動(dòng)到Drop目標(biāo)對(duì)象邊界時(shí)觸發(fā)。
Dragover事件 drop對(duì)象 當(dāng)Drag對(duì)象在Drop目標(biāo)對(duì)象上移動(dòng)時(shí)觸發(fā)，且會(huì)反復(fù)的觸發(fā)該事件。
Dragleave事件 drop對(duì)象 Dragleave事件在這個(gè)拖動(dòng)對(duì)象離開Drop目標(biāo)對(duì)象的范圍時(shí)觸發(fā)。
Drop事件 drop對(duì)象 當(dāng)這個(gè)Drag對(duì)象在Drop對(duì)象上釋放鼠標(biāo)時(shí)觸發(fā)
這些是HTML5的新特性，可以在秒秒學(xué)查找相關(guān)的資料。
重慶分公司
重慶分公司
