在web开发中,我们要实现拖放效果,需要借助javascript。今天让我们使用html5实现它:
先看html核心代码:
复制代码 代码如下:
<div>
<p>把黄色小方块拖入到红色大方框中</p>
</div>
<div id=&可爱波波头#8221;item” draggable=”true”>
</div>
<div id=”drop”>
</div>
draggable属性是html5新增加的,它有三个值true,fal,auto. true是可以拖,fal是不可以,auto由用户浏览器是否支持而定。更多请可以参考官方文档.
加上一点儿样式:
复制代码 代码如下:
<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-ur-lect:none;
-khtml-ur-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,fal);
} el if (eventtarget.attachevent) {
eventtype = “on” + eventtype;
eventtarget.attachevent(eventtype, eventhandler);
} el {
eventtarget[“on” + eventtype] = eventhandler;
}
}
// cancel event
function cancelevent (event) {
if (event.preventdefault) {
event.preventdefault();
} el {
event.returnvalue = fal;
}
}
// cancel propagation
function肚子里的蛔虫 cancelpropagation (event) {
if (event.stoppropagatio诗文大家余光中n) {
event.stoppro兴致的近义词pagation();
} el {
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(docum岳飞事迹ent.getelementbyid(id));
});
var item = document.getelementbyid(“item”);
item.tattribute(“draggable”, “true”);
listenevent(item,”dragstart”, function(evt) {
evt = evt || window.event;
evt.datatransfer.effectallowed = ‘copy’;
evt.datatransfer.tdata(“text”,item.id);
});
};
function dragover(evt) {
if (evt.preventdefault) evt.preventdefault();
evt = evt || window.event;
evt.datatransfer.dropeffect = ‘copy’;
return fal;
}
由上面的代码我们看使用一组html5 提供的拖放events,直接来看下面:
dragstart
drag event starts.
drag
during the drag operation.
dragenter
drag is over the target; ud to determine if target will accept drop.
dragover
drag is over target; ud to determine feedback to ur.
drop
drop occurs.
dragleave
drag leaves target.
dragend
drag operation ends.
定义了相关的事件,来实现想要功能。上面的js不难看懂。
你可以自己试一下,目前在opera支持最好,ie效果并不好。
希望对您web开发有帮助.
本文发布于:2023-04-03 06:49:53,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/b5a7e893586ec21b14a3916e5d1f7080.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:HTML5中实现拖放效果无须借助javascript.doc
本文 PDF 下载地址:HTML5中实现拖放效果无须借助javascript.pdf
留言与评论(共有 0 条评论) |
把黄色小方块拖入到红色大方框中
<