html5 css3实现拖放(dragdrop)示例.pdf
版权申诉
76 浏览量
2022-11-28
23:44:24
上传
评论
收藏 77KB PDF 举报
这篇文章主要为大家介绍了 html5+css3 实现拖放(draganddrop)的实现方法,需要的朋友
可以参考下。
本文简单介绍一下 html5 的拖放实现。
拖放（drag 和 drop）是 html5 标准的组成部分。
浏览器支持:internetexplorer9、firefox、opera12、chrome 以及 safari5 支持拖放。
被拖元素，dragelement:
(1)添加事件：ondragstart
(2)添加属性：dragable
放置元素，dropelement:
1、添加事件：ondargenter,ondragover,ondragleave,ondragend,ondrop
和 mouser 划入划出一类的事件很类似，字面也很好理解，不赘述了，下面会用例子来
说明。
2、页面上元素间的拖放
下面用个小例子，div 间的拖放来展示，各个事件如何被触发：
代码如下:
<html>
<title></title>
<metacharset=utf-8>
<styletype=text/css>
#dropele
div
{
float:left;
}
</style>
<scriptsrc=./js/jquery-1.8.3.jstype=text/javascriptcharset=utf-8></script>
<scripttype=text/javascript>
/**
*拖放（drag 和 drop）是 html5 标准的组成部分。
*浏览器支持
*internetexplorer9、firefox、opera12、chrome 以及 safari5 支持拖放。
*/
$(function()
{
$(#dragele)[0].ondragstart=function(event)
{
console.log(dragstart);
event.datatransfer.setdata(text,event.target.id);
};
/**
*当放置被拖数据时，会发生 drop 事件。
评论0
最新资源