html5的元素拖拽
2024-09-04 22:32:13
今天学习了妙味课堂的课程:
在html5中有支持元素拖拽的一些属性和方法:
一些实例代码如下:
<div id="div1"></div> <ul>
<li draggable="true"></li>
<li draggable="true"></li>
<li draggable="true"></li>
</ul>
<script type="text/javascript">
window.onload = function(){
var aLi = document.getElementsByTagName('li');
var oDiv = document.getElementById('div1');
for(var i=0;i<aLi.length;i++){
aLi[i].ondragstart = function(ev){
var ev = ev||window.event;
ev.dataTransfer.setData('name','su');
this.style.background = 'pink';
};
aLi[i].ondragend = function(){
this.style.background = 'red';
};
aLi[i].ondrag = function(){//在拖动时,连续触发,它与mousemove的区别在于mousemove是必须动着的。
document.title = i++;
};
}
oDiv.ondragenter = function(){//类似于mouseover
this.style.background = '#f2f2f2';
};
oDiv.ondragleave = function(){//类似于mouseout
this.style.background = '#ccc';
};
oDiv.ondragover = function(ev){
var ev = ev||window.event; // 要触发drop事件,就必须在dragover中阻止默认事件
this.style.background = '#202020';
this.style.cursor = 'pointer';
ev.preventDefault();
//return false;
};
oDiv.ondrop = function(ev){
alert(ev.dataTransfer.getData('name'));
};
} </script>
最新文章
- C/C++中动态链接库的创建和调用
- android 入门- 词汇
- js继承精益求精之寄生式组合继承
- C#使用SQL存储过程完整流程
- WCF的行为与异常-------配置文件说明
- 【python标准库模块四】Json模块和Pickle模块学习
- com.mysql.jdbc.Driver 和 com.mysql.cj.jdbc.Driver的区别
- 05--STL序列容器(List)
- PHP利用模板消息无限制向用户推送消息
- 55行代码实现Java线程死锁
- 看淘宝营销api 文档有感
- BZOJ1026或洛谷2657 [SCOI2009]windy数
- PHP之类型转化
- RpcContext
- python stdout 重定向
- How to Enable EPEL Repository for RHEL/CentOS 7.x/6.x/5.x
- [转][Dapper]SQL 经验集
- python之爬虫--番外篇(一)进程,线程的初步了解
- 关于 ssh 连接较慢的解决办法
- C# WebBrowser控件详解