HTML5 拖拽效果实现
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
li {
list-style: none;
background: orange;
width: 180px;
height: 30px;
margin: 10px;
font:normal 12px/2em "微软雅黑";
text-align: center;
} #div1 {
width: 200px;
height: 200px;
background: #ff0000;
margin: 20px;
}
</style>
</head>
<body> <ul>
<li draggable="true">你爱我像谁</li>
<li draggable="true">选择</li>
<li draggable="true">胆小鬼</li>
<li draggable="true">再见</li>
<li draggable="true">少年游</li>
<li draggable="true">泡沫</li>
<li draggable="true">跟着感觉走</li>
<li draggable="true">浮夸</li>
<li draggable="true">光辉岁月</li>
</ul>
<script>
window.onload = function(){
var oUl = document.getElementsByTagName("ul")[0];
var oLi = document.getElementsByTagName('li');
var img = document.getElementsByTagName('img')[0];
for(var i = 0; i<oLi.length;i++){
oLi[i].index = i;
oLi[i].ondragstart = function(ev){
this.style.backgroundColor = "yellow";
ev.dataTransfer.setData('index',this.index);
ev.dataTransfer.effectAllowed = "copy";
};
oLi[i].ondragend = function(ev){
this.style.backgroundColor = "orange";
};
oLi[i].ondragover= function(ev){
ev.preventDefault();
};
oLi[i].ondrop = function(ev){
var flag = ev.dataTransfer.getData('index');
var node = oLi[flag];
oUl.insertBefore(node,this.nextSibling); for(var i = 0; i<oLi.length;i++){
oLi[i].index = i;
}
};
}
}
</script>
</body>
</html>
HTML5 拖拽效果实现的更多相关文章
- HTML5 拖拽实现
简介: 最早在网页中引入JavaScript拖放功能是IE4.当时,网页中只有两种对象可以拖放:图像和某些文本.拖放图像时,把鼠标放到图像上,按住鼠标不放就可以拖放它.拖放文本时,要先选中文本,然后可 ...
- HTML5拖拽功能中 dataTransfer对象详解
有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...
- 基于html5拖拽api实现列表的拖拽排序
基于html5拖拽api实现列表的拖拽排序 html代码: <ul ondrop="drop_handler(event);" ondragover="dragov ...
- jQuery的DOM操作实例(2)——拖拽效果&&拓展插件
一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Html5拖拽复制
拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...
- html5拖拽
html5拖拽一 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- WinForm支持拖拽效果
有一个MSDN客户提问在WinForm中如何实现拖拽效果——比如在WinForm中有一个Button,我要实现的效果是拖拽这个Button到目标位置后生成一个该控件的副本. 其实这个操作主要分成三步走 ...
随机推荐
- C#操作Xml:通过XmlDocument读写Xml文档
什么是Xml? Xml是扩展标记语言的简写,是一种开发的文本格式.关于它的更多情况可以通过w3组织了解http://www.w3.org/TR/1998/REC-xml-19980210.如果你不知道 ...
- winform 实现选择的城市名单
首先在地图上 #region 选择城市 /// <summary> /// 点击字母事件 /// </summary> /// <param name="sen ...
- C#函数式编程-序列
C#函数式编程之序列 过了许久的时间,终于趁闲暇的时间来继续将函数式编程这个专辑连载下去,这段时间开头是为IOS这个新方向做准备,将OC的教程写成了SWIFT版,当然我个人是支持Xamarin,但是我 ...
- 修改vim/terminal配色
http://blog.csdn.net/angle_birds/article/details/11694325
- STL在迭代的过程,删除指定的元素
直接在Code.在 Picture #include <iostream> #include <list> using namespace std; // STL在迭代的过程中 ...
- MySQL引擎的相关知识
MySQL数 据库引擎取决于MySQL在安装的时候是如何被编译的.要添加一个新的引擎,就必须重新编译MYSQL.在缺省情况下,MYSQL支持三个引 擎:ISAM.MYISAM和HEAP.另外两种类型I ...
- NM常用网络命令
Ipconfig命令 Ipconfig命令可以被用来显示机器当前TCP/IP配置信息. 当使用Ipconfig时不带不论什么參数选项,那么它为每一个已经配置好的接口显示IP地址.子网掩码和默认网关值. ...
- [Unity-7] Update和FixedUpdate
1.Update和FixedUpdate这是Unity既用内提供的帧功能接口相关联. Update():这个函数里面的内容每一帧都会被运行一次.这个函数有一个特点,那就是运行的频率等于帧率.而这个帧率 ...
- C++ AMP 介绍(两)
C++ AMP 介绍(两) 最后更新:2014-05-02 读前提:<C++ AMP介绍(一个)> 周边环境:Windows 8.1 64bit英文版,Visual Studio 2013 ...
- Erlang常用代码段
十六进制字符串转为二进制 hex_to_bin(Bin) -> hex2bin(Bin). hex2bin(Bin) when is_binary(Bin) -> hex2bin(bina ...