<!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 拖拽效果实现的更多相关文章

  1. HTML5 拖拽实现

    简介: 最早在网页中引入JavaScript拖放功能是IE4.当时,网页中只有两种对象可以拖放:图像和某些文本.拖放图像时,把鼠标放到图像上,按住鼠标不放就可以拖放它.拖放文本时,要先选中文本,然后可 ...

  2. HTML5拖拽功能中 dataTransfer对象详解

    有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...

  3. 基于html5拖拽api实现列表的拖拽排序

    基于html5拖拽api实现列表的拖拽排序 html代码: <ul ondrop="drop_handler(event);" ondragover="dragov ...

  4. jQuery的DOM操作实例（2）——拖拽效果&&拓展插件

    一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件

  5. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  6. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Html5拖拽复制

    拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...

  8. html5拖拽

    html5拖拽一 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  9. WinForm支持拖拽效果

    有一个MSDN客户提问在WinForm中如何实现拖拽效果——比如在WinForm中有一个Button,我要实现的效果是拖拽这个Button到目标位置后生成一个该控件的副本. 其实这个操作主要分成三步走 ...

随机推荐

  1. POJ 2081 Recaman&#39;s Sequence（水的问题）

    [简要题意]:这个主题是很短的叙述性说明.挺easy. 不重复. [分析]:只需要加一个判断这个数是否可以是一个数组,这个数组的范围. // 3388K 0Ms #include<iostrea ...

  2. NFC学习笔记2——Libnfc简介及安装

    我一直希望自己的文章做一些记录的英文翻译.趁着学习NFC,现在,libnfc主页libnfc介绍和不同的操作系统libnfc文章做一些翻译安装.一方面,提高自己的英语,一方面有了解libnfc. 原文 ...

  3. C#中的Params、ref、out的区别

    C# Params params params 关键字可以指定在参数数目可变处采用参数的方法参数. 在方法声明中的 params 关键字之后不允许任何其他参数,并且在方法声明中只允许一个 params ...

  4. shell 命名管道,进程间通信

    命名管道基础 命名管道也被称为FIFO文件, 在文件系统中是可见的,并且跟其它文件一样可以读写! 命名管道特点: 当写进程向管道中写数据的时候,如果没有进程读取这些数据,写进程会堵塞 当读取管道中的数 ...

  5. 在VirtualBox安装OS X 10.10

    下面将指导介绍了如何引入自由和强大VirtualBox安装在虚拟机上OS X Yosemite 10.10 法律免责声明:本指南旨在说明如何在定期购买的苹果电脑上创建一个虚拟机执行真正的Mac OS ...

  6. FPGA 异步时钟处理方

    1 假设FPGA设计,包括不同的频率的时钟,它会发出涉及异步时钟. 我们需要一些方法来使时钟同步,从而保证FPGA可靠性设计. 2 在建立和保持时间所构成的有效时间窗体内,数据输入到触发器进行转换. ...

  7. UI 收集

    semantic http://www.semantic-ui.com.cn/modules/reveal.html sbadmin http://startbootstrap.com/templat ...

  8. Ubuntu下的用户和权限（二）

    五.chown.chgrp命令 从名字就能够猜測他们是干嘛的,可是这两个命令须要root权限. chown命令的格式为:chown user:group file  中间的user : group三项 ...

  9. 基于webrtc技术session border controler (SBC)

    由于原来的文章 http://blog.csdn.net/voipmaker  转载注明出处. 我建了一个通信学习 交流群. 45211986, 欢迎增加. WebRTC技术致力于在浏览器端实现实时音 ...

  10. poj 3026 Borg Maze (bfs + 最小生成树)

    链接:poj 3026 题意:y行x列的迷宫中,#代表阻隔墙(不可走).空格代表空位(可走).S代表搜索起点(可走),A代表目的地(可走),如今要从S出发,每次可上下左右移动一格到可走的地方.求到达全 ...