HTML5中實現(xiàn)拖放效果無須借助javascript

2020-03-24 17:32:16

字體：大中小

供稿：網(wǎng)友

在Web開發(fā)中，我們要實現(xiàn)拖放效果，需要借助Javascript。今天讓我們使用Html5實現(xiàn)它：
先看html核心代碼:

復(fù)制代碼代碼如下:
div
p 把黃色小方塊拖入到紅色大方框中 /p
/div
div id="item" draggable="true"
/div
div id="drop"
/div

draggable屬性是html5新增加的，它有三個值true,false,auto. true是可以拖，false是不可以，auto由用戶瀏覽器是否支持而定。更多請可以參考官方文檔.
加上一點兒樣式:

復(fù)制代碼代碼如下:
style type="text/css"
#drop
{
width: 300px;
height: 200px;
background-color: #ff0000;
padding: 5px;
border: 2px solid #000000;
}
#item
{
width: 100px;
height: 100px;
background-color: #ffff00;
padding: 5px;
margin: 20px;
border: 1px dashed #000000;
}
*[draggable=true] {
-moz-user-select:none;
-khtml-user-drag: element;
cursor: move;
}
*:-khtml-drag {
background-color: rgba(238,238,238, 0.5);
}
/style

然后我們來看javascript:

復(fù)制代碼代碼如下:
function listenEvent(eventTarget, eventType, eventHandler) {
if (eventTarget.addEventListener) {
eventTarget.addEventListener(eventType, eventHandler,false);
} else if (eventTarget.attachEvent) {
eventType = "on" + eventType;
eventTarget.attachEvent(eventType, eventHandler);
} else {
eventTarget["on" + eventType] = eventHandler;
}
}
// cancel event
function cancelEvent (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
// cancel propagation
function cancelPropagation (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
window.onload=function() {
var target = document.getElementById("drop");
listenEvent(target,"dragenter",cancelEvent);
listenEvent(target,"dragover", dragOver);
listenEvent(target,"drop",function (evt) {
cancelPropagation(evt);
evt = evt || window.event;
evt.dataTransfer.dropEffect = 'copy';
var id = evt.dataTransfer.getData("Text");
target.appendChild(document.getElementById(id));
});
var item = document.getElementById("item");
item.setAttribute("draggable", "true");
listenEvent(item,"dragstart", function(evt) {
evt = evt || window.event;
evt.dataTransfer.effectAllowed = 'copy';
evt.dataTransfer.setData("Text",item.id);
});
};
function dragOver(evt) {
if (evt.preventDefault) evt.preventDefault();
evt = evt || window.event;
evt.dataTransfer.dropEffect = 'copy';
return false;
}

由上面的代碼我們看使用一組HTML5 提供的拖放Events,直接來看下面:
dragstart
Drag event starts.
drag
During the drag operation.
dragenter
Drag is over the target; used to determine if target will accept drop.
dragover
Drag is over target; used to determine feedback to user.
drop
Drop occurs.
dragleave
Drag leaves target.
dragend
Drag operation ends.
定義了相關(guān)的事件，來實現(xiàn)想要功能。上面的Js不難看懂。
你可以自己試一下，目前在Opera支持最好，IE效果并不好。
希望對您Web開發(fā)有幫助.html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：HTML頁面嵌入視頻與JS控制切換視頻示例詳解

下一篇：是什么js文件-