关键字：HTML5, Drag&Drop, JavaScript, CSS

运行环境：Chrome

  1.     <!DOCTYPE html>
  2.     <html>
  3.     <head>
  4.         <title>example</title>
  5.  
  6.         <style type="text/css">
  7.             .main-area {
  8.                 margin-left: 10%;
  9.                 margin-right: 10%;
  10.                 min-width: 600px;
  11.             }
  12.  
  13.             ul {
  14.                 padding-left: 0;
  15.                 text-align:center;
  16.             }
  17.  
  18.             li {
  19.                 word-break: break-all;
  20.                 display: inline-block;
  21.                 width: 400px;
  22.                 height: 200px;
  23.                 margin: 3px;
  24.                 border-radius: 3px;
  25.                 box-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
  26.             }
  27.         </style>
  28.     </head>
  29.     <body>
  30.         <script>
  31.             // on source element
  32.             function dragstart (ev) {
  33.                 ev.dataTransfer.effectAllowed = "move";
  34.                 ev.dataTransfer.setData("srcId", ev.currentTarget.id);
  35.                 ev.dataTransfer.setDragImage(ev.currentTarget, 0, 0);
  36.             }
  37.             function dragend(ev) {
  38.                 ev.dataTransfer.clearData("srcId");
  39.             }
  40.  
  41.             // on target element
  42.             function dragover(ev) {
  43.                 ev.preventDefault();
  44.             }
  45.             function drop(ev) {
  46.                 var srcId = ev.dataTransfer.getData("srcId");
  47.                 var srcObj = document.getElementById(srcId);
  48.                 if(srcObj != ev.currentTarget){
  49.                     var list = document.getElementById('list');
  50.                     list.insertBefore(srcObj, ev.currentTarget);
  51.                 }
  52.             }
  53.         </script>
  54.         <div id='main-area'>
  55.             <ul id='list'>
  56.                 <li id='1' draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)" ondragover="dragover(event)" ondrop="drop(event)">
  57.                     111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
  58.                 </li><li id='2' draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)" ondragover="dragover(event)" ondrop="drop(event)">
  59.                     222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222
  60.                 </li><li id='3' draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)" ondragover="dragover(event)" ondrop="drop(event)">
  61.                     333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333
  62.                 </li><li id='4' draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)" ondragover="dragover(event)" ondrop="drop(event)">
  63.                     444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444
  64.                 </li>
  65.             </ul>
  66.         </div>
  67.     </body>
  68.     </html>

注：如果每个li之间换行，将会有空格产生。参考问题：http://stackoverflow.com/questions/25520904/html5-reorder-the-children-li-of-ul-by-drag-and-drop-the-borders-between-li-el

HTML5:一个拖拽网页元素的例子的更多相关文章

  1. html5 文件拖拽上传

    本文首先发表在  码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...

  2. HTML5之拖拽(兼容IE和非IE)

    前世:项目中需要拖动div,然后和某个div进行位置交换,这不是关键,关键是还要保存位置,然后在下次打开的时候按照保存的位置显示.还好本人功力深厚,一下子就想到了用localStorage来保存,事实 ...

  3. JavaScript动画-拖拽改变元素大小

    ▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...

  4. 开源自己写的一个拖拽库，兼容到IE8+

    github地址:https://github.com/qiangzi7723/draggable 目前这个库的兼容做到了兼容IE8,所以如果需要兼容IE8的朋友不妨试试.库里面写了很多的注释,对于想 ...

  5. selenium学习-拖拽页面元素

    一.ActionChains包 模拟鼠标的操作要首先引入ActionChains的包 from selenium.webdriver.common.action_chains import Actio ...

  6. javascript动画系列第四篇——拖拽改变元素大小

    × 目录 [1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化 前面的话 拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位 ...

  7. jquery插件之拖拽改变元素大小

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被 ...

  8. 基于html5可拖拽图片循环滚动切换

    分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="s ...

  9. 分享html5的一个拖拽手法

    就是这样的效果:拖拽之前 之后: 上代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

随机推荐

  1. php连接oracle

    1.安装oracle客户端,不管是32位还是64位:当系统是32位的时候,要装32位的客户端,PL/SQL才能给连上数据库 2.php.ini中对应的oracle相关扩展打开.php_openssl. ...

  2. Iperf使用方法

    Iperf使用方法 Iperf  是一个网络性能测试工具.Iperf可以测试TCP和UDP带宽质量.Iperf可以测量最大TCP带宽,具有多种参数和UDP特性.Iperf可以报告带宽,延迟抖动和数据包 ...

  3. java窗体与Flash交互

    最近在研究flash,用flash去读取文件很简单,但是存储文件就很麻烦了. 因此想到用java的窗体进行交互. 下面是DJNativeSwing-SWT-1-0-3-20140708的下载链接: h ...

  4. cglib源码分析（四）：cglib 动态代理原理分析

    本文分下面三个部分来分析cglib动态代理的原理. cglib 动态代理示例 代理类分析 Fastclass 机制分析 一.cglib 动态代理示例 public class Target{ publ ...

  5. Java基础知识强化之IO流笔记55：IO流练习之 自定义类模拟LineNumberReader的获取行号功能案例

    1. 自定义类模拟LineNumberReader的获取行号功能案例 2. 代码实现: (1)MyBufferedReader.java: package cn.itcast_08; import j ...

  6. C#中的字符串

    1.    值类型与引用类型比较 classProgram { staticvoid Main() { int b = a;   //将a的副本给变量b b = 10; Console.WriteLi ...

  7. Bootstrap与tab组合，切换菜单实例

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  8. Java immutable class

    可变类:类的实例创立之后,还可以修改这个实例的内容. 比如创建一个3*3的矩阵,如果设立了set function,在main中可以用set更改对应位置元素的大小. 不可变类:就是类的实例一旦被建立, ...

  9. js高程 第 4章 变量、作用域和内存问题 【笔记】

    4.4 小结 JavaScript变量可以用来保存两种类型的值:基本类型值和引用类型值.基本类型的值源自以下 5 种基本数据类型:Undefined.Null.Boolean.Number 和 Str ...

  10. .NET客户端下载SQL Server数据库中文件流保存的大电子文件方法（不会报内存溢出异常）

    .NET客户端下载SQL Server数据库中文件流保存的大电子文件方法(不会报内存溢出异常) 前段时间项目使用一次性读去SQL Server中保存的电子文件的文件流然后返回给客户端保存下载电子文件, ...