关键字: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. Discuz建站教程:本地安装discuz网站

    网站建目前都很简单,建站容易,管理难,网站做大优化更难.本人有建站经验,目前给大家分享一下如何建站,当然,目前使用的是本地建站,因为非本地建站需要购买域名和网站空间,当然,朋友们想真正建站的,对于一些 ...

  2. [分享]Ubuntu12.04安装基础教程(图文)

    [分享]Ubuntu12.04安装基础教程(图文) 原文地址: http://teliute.org/linux/Ubsetup/lesson21/lesson21.html 1.进入 live cd ...

  3. 【转】C++里定义全局变量和函数常用方法

    http://blog.csdn.net/niying/article/details/637084 1:在头文件是声明变量,然后在使用的文件中用exten标识. ".h": in ...

  4. linux 配置 Apache mysql php最新版

    第一部分:安装mysql 官方下载 mysql5.6.19 64位的rpm格式文件 0.rpm 四个mysql5.6.19 卸载默认的mysql yum -y remove mysql-libs-* ...

  5. beaglebone-black 在Angstrom系统中的网络配置方法

    Beaglebone Linux 101: Assigning a Static IP Address with Connman Posted on February 6, 2012 by dwatt ...

  6. 友元(friend)--初学篇

    友元:友好的元子,,,,呵呵呵 一般一个类中有私有(private),公有(public),和保护(protected)三种类型成员,而只有public成员才可以在类外被随便访问,protected只 ...

  7. js验证

    验证短日期(2007-06-05) function strDateTime(str) {    var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1 ...

  8. css所有选择器的详解

    ----------------------------------------css 选择器---------------------------------------- 1,组合选择器: 1)e ...

  9. Java——有关日期的方法

    1.日期转换成String格式化输出: public String getDate() { SimpleDateFormat format = new SimpleDateFormat("y ...

  10. 记一次ios使用OAuth 2.0写的接口获取token的小错

    1.用ios原生网络请求的话,请求参数不能这样传 而要这样传 2.用afnetworking的话,要注意各个参数有没有错误,参数可以直接这样传