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

　　

之后：

　　上代码：

<!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. 利用grep-console插件使Intellij idea显示多颜色调试日志

    由于Intellij idea不支持显示ascii颜色,grep-console插件能很好的解决这个问题,下面就以开发JavaEE项目中,结合Log4j配置多颜色日志输出功能. 安装grep-cons ...

  2. .Net Core在X86上实现Interlocked.Increment(ref long)的方式

    因为在X86上long会被分割为两个int进行操作, 那么Interlocked.Increment的实现成为了一个问题. 在一番搜索后未发现有现成的文章解释这个问题,于是我就动手分析了. 这篇是笔记 ...

  3. Sphinx学习笔记2

    因为网站搜索的需要,启动了一个搜索引擎项目,其实也算不上完整的搜索引擎,需求很简单,如下:     1)搜索产品名.类别名.品牌名.副标题.关键字等字段     2)数据量目前为13000左右,未来可 ...

  4. iOS iOS10 的适配问题

    其他:Xcode8 iOS10 的新特性 1.系统判断方法失效:2.隐私数据的访问问题:3.UIColor 问题4.真彩色的显示5.ATS问题6.UIStatusBar问题7.UITextField8 ...

  5. Mybatis-----优化配置文件，基于注解CR

    这篇主要写配置文件的优化,例如  jdbc.properties 配置文件  ,引入数据库的文件,例如driver,url,username,password 等,然后在 SqlMapConfig.x ...

  6. 谈谈CommonsChunkPlugin抽取公共模块

    引言 webpack插件CommonsChunkPlugin的主要作用是抽取webpack项目入口chunk的公共部分,具体的用法就不做过多介绍,不太了解可以参考webpack官网介绍: 该插件是we ...

  7. 一张图讲清楚TCP流量控制

  8. sudo 做不到的事

    本文是经验帖,以后遇到类似的情况会持续更新到这篇文章 普通用户使用sudo会遇到以下情况 1.字符流无法写入到 /var/log/messages /var/log/secure (实际上这些文件一旦 ...

  9. Codebase Refactoring (with help from Go)

    Codebase Refactoring (with help from Go) 代码库重构(借助于Go) 1.摘要 Go应该添加为类型创建替代等效名称的能力,以便在代码库重构期间渐进代码修复.本文解 ...

  10. go generate 生成代码

    今后一段时间要研究下go generate,在官网博客上看了Rob Pike写的generating code,花了一些时间翻译了下.有几个句子翻译的是否正确有待考量,欢迎指正. 生成代码 通用计算的 ...