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

运行环境：Chrome

    <!DOCTYPE html>

    <html>

    <head>

        <title>example</title>

        <style type="text/css">

            .main-area {

                margin-left: 10%;

                margin-right: 10%;

                min-width: 600px;

            }

            ul {

                padding-left: 0;

                text-align:center;

            }

            li {

                word-break: break-all;

                display: inline-block;

                width: 400px;

                height: 200px;

                margin: 3px;

                border-radius: 3px;

                box-shadow: 1px 1px 3px rgba(0, 0, 0, 1);

            }

        </style>

    </head>

    <body>

        <script>

            // on source element

            function dragstart (ev) {

                ev.dataTransfer.effectAllowed = "move";

                ev.dataTransfer.setData("srcId", ev.currentTarget.id);

                ev.dataTransfer.setDragImage(ev.currentTarget, 0, 0);

            }

            function dragend(ev) {

                ev.dataTransfer.clearData("srcId");

            }

            // on target element

            function dragover(ev) {

                ev.preventDefault();

            }

            function drop(ev) {

                var srcId = ev.dataTransfer.getData("srcId");

                var srcObj = document.getElementById(srcId);

                if(srcObj != ev.currentTarget){

                    var list = document.getElementById('list');

                    list.insertBefore(srcObj, ev.currentTarget);

                }

            }

        </script>

        <div id='main-area'>

            <ul id='list'>

                <li id='1' draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)" ondragover="dragover(event)" ondrop="drop(event)">

                    111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111

                </li><li id='2' draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)" ondragover="dragover(event)" ondrop="drop(event)">

                    222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222

                </li><li id='3' draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)" ondragover="dragover(event)" ondrop="drop(event)">

                    333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333

                </li><li id='4' draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)" ondragover="dragover(event)" ondrop="drop(event)">

                    444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444

                </li>

            </ul>

        </div>

    </body>

    </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. Test-NetConnection

    有了PowerShell 4.0,排除网络故障的日子就会轻松很多.Test-NetConnection cmdlet将多个测试整合到了一个简单的有几个参数的命令当中.例如,命令Test-NetConn ...

  2. android 的异步任务

    /** * 异步任务的三个泛型参数: * 1.调用execute方法时传入的参数类型,输入参数 * 2.progressUpdate的方法入参 * 3.异步任务的返回结果类型 doInBackgrou ...

  3. 机器学习算法-K-means聚类

    引文: k均值算法是一种聚类算法.所谓聚类.他是一种无监督学习,将类似的对象归到同一个蔟中.蔟内的对象越类似,聚类的效果越好. 聚类和分类最大的不同在于.分类的目标事先已知.而聚类则不一样. 由于其产 ...

  4. asp遇到的一些问题

    1.伪静态问题...后台设置支持, 2.数据库链接错误,也就是说  .net 功能冲突,要后台关闭 3.本机也可以设置 iis服务器 win7配置自己的IIS服务器亲自做的图文很详细 http://j ...

  5. How To Install Kernel 3.10 On Ubuntu, Linux Mint, Debian and Derivates

    n this article I will show you how to install Linux Kernel 3.10 on Ubuntu 13.10 Saucy Salamander, Ub ...

  6. 如何去除CISCO交换机中的口令？？

    加电后按住交换机前面的那个按钮 灯不闪了以后松手这时交换机会进入switch:模式输入命令 flash然后 dir flash:你会发现有个 config.text 的文件 你的密码和配置都保存在那里 ...

  7. Android_Broadcast

    /** * Broadcast(广播):是一种广泛运用的在应用程序之间传输信息的机制 * * BroadcastReceiver(广播接收者) * 是对发送出来的广播进行过滤接收并响应的一类组件,它就 ...

  8. Windows Thrift安装及HelloWorld

    Thrift是一个facebook开源的高效RPC框架,其主要特点是跨语言及二进制高效传输(除了二进制,也支持json等常用序列化机制),官网地址:http://thrift.apache.org 跨 ...

  9. C#扫盲之：前台线程后台线程

    1.线程分类 线程由程序员创建,可是创建的方式不同,总体来说有两种,一种是个人构造,也就是使用thread类new线程对象创建,这一类线程是大部分程序员知道的,也叫专用线程;还有一种是由CLR创建,这 ...

  10. ADO.Net知识总结

    (一)基础知识 ADO.NET: .NET中用来向数据库提交执行SQL语句的一堆类 本机访问直接"Windows验证",但是一般项目中都是单独的数据库服务器,程序在另外一台电脑上连 ...