就是这样的效果：拖拽之前

　　

之后：

　　上代码：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8" />

        <title> html5 drag and drop</title>

        <style>

            *[draggable=true] {

                -moz-user-select:none;

                -khtml-user-drag: element;

                cursor: move;

            }

            *:-khtml-drag {

                background-color: rgba(238,238,238, 0.5);

            }

            a {

                text-decoration: none;

                color: #000;

                width:120px;

                border: 3px dashed #999;

                padding: 10px;

                display:inline-block;

                transition: all 1s;

                position:absolute ;

                top:10px;

            }

            .container {

                position:relative;

            }

            a.move {

                -webkit-transform:scale3d( 1.1, 1.1, 1.1 );

            }

            a:hover:after {

                content: ' (drag me)';

                color: green }

        </style>

    </head>

    <body>

        <div class="container">

            <a draggable="true"  id="a1" style='left:0px;'>one</a>

            <a draggable="true"  id="a2" style='left:160px;'>two</a>

            <a draggable="true"  id="a3" style='left:320px;'>three</a>

            <a draggable="true"  id="a4" style='left:480px;'>four</a>

            <a draggable="true"  id="a5" style='left:640px;'>five</a>

        </div>

        <script src="http://code.jquery.com/jquery-2.0.0.js"></script>

        <script>

            var origin, is_moving = false;

            $(".container").find("a").on("drop",

            function(e) {

                var origin_pos = $(origin).position();

                var target_pos = $(e.target).position();

                $(origin).addClass("move").animate(target_pos, "fast",

                    function() {

                        console.log(this);

                        $(this).removeClass("move");

                    });

                $(e.target).addClass("move").animate(origin_pos, "fast",

                function() {

                    $(this).removeClass("move");

                });

            }).on("dragstart",

            function(e) {

                if (is_moving) {

                    return false;

                }

                is_moving = true;

                e.originalEvent.dataTransfer.effectAllowed = 'move';

                origin = this;

            }).on("dragover",

            function(e) {

                if (e.preventDefault) e.preventDefault(); //

                is_moving = false;

                e.originalEvent.dataTransfer.dropEffect = 'move'; //

            });

        </script>

    </body>

</html>

每日一句：I always knew looking back on the tears would make me laugh, but I never knew looking back on the laughs would make me cry.

翻译：我知道再回首时，那些眼泪想来可笑；却不知再回眸时，那些欢声笑语也能叫我潸然泪下。

分享html5的一个拖拽手法的更多相关文章

  1. html5 Sortable.js 拖拽排序源码分析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的.   本帖属于原创,转载请出名出处. 官网http:// ...

  2. HTML5多图片拖拽上传带进度条

    前言 昨天利用css2的clip属性实现了网页进度条觉得还不错,但是很多情况下,我们在那些时候用进度条呢,一般网页加载的时候如果有需要可以用,那么问题就来了,怎么才算整个加载完毕呢,是页面主要模块加载 ...

  3. 【手记】小心在where中使用NEWID()的大坑 【手记】解决启动SQL Server Management Studio 17时报Cannot find one of more components...的问题 【C#】组件分享：FormDragger窗体拖拽器 【手记】注意BinaryWriter写string的小坑——会在string前加上长度前缀length-prefixed

    [手记]小心在where中使用NEWID()的大坑 这个表达式: ABS(CHECKSUM(NEWID())) % 3 --把GUID弄成正整数,然后取模 是随机返回0.1.2这三个数,不可能返回其它 ...

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

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

  5. html5中的拖拽功能

    拖拽元素支持的事件 ondrag 应用于拖拽元素,整个拖拽过程都会调用 ondragstart 应用于拖拽元素,当拖拽开始时调用 ondragleave 应用于拖拽元素,当鼠标离开拖拽元素是调用 on ...

  6. HTML5 drag & drop 拖拽与拖放简介

    DataTransfer 对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer. draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如 ...

  7. javaScript+html5实现图片拖拽

    源码: <!DOCTYPE html><html><head> <meta charset="utf-8"/> <title& ...

  8. 【C#】组件分享：FormDragger-窗体拖拽器

    适用:.net2.0+ winform项目 介绍: 类似QQ.迅雷等讲究UI体验的软件,都支持在窗口内多处地方拖动窗口,而不必老实巴交的去顶部标题栏拖,这个组件就是让winform也能这样随性拖拽,随 ...

  9. 每日分享！～ JavaScript(拖拽事件）

    浏览器的拖拉事件 拖拉(drag)指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里. 拖拉的对象有好几种,包括元素节点.图片.链接.选中的文字等等.在网页中 ...

随机推荐

  1. leetcode第一刷_Populating Next Right Pointers in Each Node II

    很自然的推广,假设去掉全然二叉树的条件呢?由于这个条件不是关键,因此不会影响整体的思路.做法依旧是每次找到一层的起点,然后一层一层的走. 假设是全然二叉树的话,每层的起点就是上一层起点的左孩子,兄弟之 ...

  2. redis参数配置说明

    参数说明redis.conf 配置项说明如下:1. Redis默认不是以守护进程的方式运行,可以通过该配置项修改,使用yes启用守护进程  daemonize no2. 当Redis以守护进程方式运行 ...

  3. SSH简单项目

    这是我学习SSH整合时的一个测试项目,代码比较简单 整个项目实现从数据库中取数据,在页面上显示.项目的结构如下: (1)数据库设计 数据库使用的是student数据库中的一个数据库表grade,表的内 ...

  4. 前后端分离ueditor富文本编辑器的使用-Java版本

    最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...

  5. 原生js版分页插件

    之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...

  6. Postgres中的物化节点之sort节点

    顾名思义,物化节点是一类可缓存元组的节点.在执行过程中,很多扩展的物理操作符需要首先获取所有的元组后才能进行操作(例如聚集函数操作.没有索引辅助的排序等),这时要用物化节点将元组缓存起来.下面列出了P ...

  7. ADB usb 或 WiFi 连接手机 ADB工具下载

    ADB usb 或 WiFi 连接手机 ADB工具下载 小米 MIUI8.5 手机开启USB调试 1.设置-->我的手机-->全部参数-->MIUI版本--->连续点N次 2. ...

  8. order by按照指定记录排序

    //按照id降序 并把name是小黑的排在最后SELECT * from dms_student order by name not like '小黑' desc,id desc; //按照id降序 ...

  9. async和enterproxy控制并发数量

    聊聊并发与并行 并发我们经常提及之,不管是web server,app并发无处不在,操作系统中,指一个时间段中几个程序处于已经启动运行到完毕之间,且这几个程序都是在同一处理机上运行,并且任一个时间点只 ...

  10. 刚实习的自己-php

    刚毕业的大学生,可能你的理论知识很丰富,但是你要清楚的是:你缺少实战经验.            正式实习的时候是在下午,老板给了我一个他们几年前开发好的系统(cms),这是一个展示型的网站,也就是发 ...