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

　　

之后：

　　上代码：

<!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. 系统自带vim命令学习教程

    [环境] [干货分享] vim或者vi命令在很多linux环境中自带一款学习教程,其教程说明语言还是随系统变化. 输入vimtutor这个命令会打开一款学习神器. 打开之后显示如下,vimtutor一 ...

  2. java类的继承的一些细节

    类的继承是java面向对象体系的一个重要方面(封装.继承.多态),对于java类的继承,需要注意如下细节. 1.构造函数. 如果一个类没有任何构造函数,系统会默认分配一个无参的构造函数给它,这个构造函 ...

  3. IntelliJ Idea 2017 注册码 免费激活方法

    1. 到网站 http://idea.lanyus.com/ 获取注册码. 2.弹窗中选择最后一个页面license server,填入下面一种链接即可: http://idea.iteblog.co ...

  4. HTML页面中JavaScript能获取到的各种屏幕大小信息

    在HTML页面中,通过JavaScript代码访问 window 对象,能够获取到很多表征屏幕大小的信息,下面列举并加以区分. window 对象中的屏幕信息 window.innerheight. ...

  5. JAVA NIO学习一：NIO简介、NIO&IO的主要区别

    在前面学习了IO之后,今天我们开始进入NIO学习环节,首先我们会NIO做一个简单的介绍,让大家认识NIO,然后会和IO进行一个对比认识进行区分.好了,下面我们就开始学习: 一.NIO简介 1.概述 从 ...

  6. CSS之clearfix清除浮动

    .clear { clear: both; height: 0; overflow: hidden; display: block; line-height: 0 }   .clearfix:afte ...

  7. iOS 应用中加载文档pdf／word／txt

    一.加载PDF文档:应用内打开文档.手机中其他应用打开文档 Demo 首先拖入一个文档pdf.word.txt,打开不同的文档知识 文件名字.类型修改即可 #import "ReadView ...

  8. iOS 单利模式实现/优缺点

    感谢此文章提供摘要: http://www.cnblogs.com/lyanet/archive/2013/01/11/2856468.html 优缺点:http://blog.csdn.net/ta ...

  9. xcode编译报错unknown error -1=ffffffffffffffff Command /bin/sh failed with exit code 1

    升级完xcode9.1之后,编译项目出现如下错误: CI今日构建时报出如下错误: /Users/xxx/Library/Developer/Xcode/DerivedData/Snowball-ebl ...

  10. xamarin android 在代码中如何设置文本颜色

    xamarin android 在代码中如何设置文本颜色 TextView v = FindViewById<TextView>(Android.Resource.Id.Message); ...