在Web开发中，我们要实现拖放效果，需要借助Javascript。今天让我们使用Ht ML 5实现它：
先看html核心代码 :
复制代码
代码如下:
<div>
<p>把黄色小方块拖入到 红色 大方框中</p>
</div>
<div id=" IT em" Drag gable="true">
</div>
<div id="drop">
</div>
draggable属性是html5新增加的，它有三个值true,false,auto. true是可以拖，false是不可以，auto由用户浏览器 是否 支持而定。更多请可以参考 官方 文档.
加上 一点 儿样式 :
复制代码
代码如下:
<style ty PE ="text/css">
# drop
{
width: 300px;
h ei ght: 200px;
background-color: #ff0000;
padding: 5px;
border: 2px solid #000000;
}
#item
{
width: 100px;
height: 100px;
background-color: #ffff00;
padding: 5px;
m arg in: 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 :
复制代码
代码如下:
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.p rev entDefault) {
event. PR eventDefault();
} else {
event.returnValue = false;
}
}
// cancel propagation
function cancelPropagation (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelB ub ble = 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.data transfer .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.effect Allowed = '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 opera tion.
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.
定义了相关的事件，来实现想要功能。上面的Js不难看懂。
你可以自己试一下，目前在Opera支持最好，IE效果并不好。
希望对您Web开发有帮助.
总结
以上是 为你收集整理的 HTML5中实现拖放效果无须借助javascript 全部内容，希望文章能够帮你解决 HTML5中实现拖放效果无须借助javascript 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于HTML5中实现拖放效果无须借助javascript的详细内容...