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

　　

之后：

　　上代码：

<!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. 前端优化之动画为什么要尽量用css3代替js

    导致JavaScript效率低的两大原因:操作DOM和使用页面动画.通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在内了在频繁的操作DOM和CSS时,浏 ...

  2. F02 金融学第二定律 资金的积聚

    美国南北战争,北方取胜的关键在于发行了债券,从而积聚了资金,提升了北方军队战斗力. 纽约的逆袭,得益于伊利运河的修建,而伊利运河的建造需要的资金,全靠债券发行积聚的资金. 聚积起来的资金,往往决定了重 ...

  3. webpack入门（2）

    webpack入门(2) ps:每个案例都是基于前一个案例改造的 webpack入门(1) 戳这里 案例源码戳这里 十二.ProvidePlugin 自动加载模块 new webpack.Provid ...

  4. 自学Zabbix3.8-可视化Visualisation

    随着大量数据流入Zabbix,如果用户能够查看正在发生的事情,而不仅仅是数字,那么对于用户来说,这就变得容易得多了.这就是图的所在. 图允许快速地掌握数据流,关联问题,发现什么时候开始,或者做什么事情 ...

  5. windows7 创建http 服务器

    利用windows7 操作系统自带的功能创建http 服务器 方法/步骤     打开控制面板--程序---开启和关闭windows功能.   选择IIS(internet information S ...

  6. SDWebimage如何获取缓存大小以及清除缓存

    sdwebimage如何获取缓存大小以及清除缓存 1.找到SDImageCache类 2.添加如下方法: - (float)checkTmpSize {    float totalSize = 0; ...

  7. 52、css属性操作

    前面说的主要是css的使用规则和选择器等,这篇主要讲解css的具体使用. 一.css text 1.文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 1)十六进制值 ...

  8. JDK 1.8 源码阅读和理解

    根据 一篇文章教会你,如何做到招聘要求中的“要有扎实的Java基础” 的指引,决定开始阅读下JDK源码. 本文将作为源码阅读总纲 一.精读部分 java.io java.lang java.util ...

  9. js实现文字逐个出现动效

    效果 首先看下效果,这是在h5页面中常见的一中文字展现方式,那么是怎么实现的呢?其实很简单 思路 用一个定时器将预制的文字通过.substring(0, i)方法不断的赋给要显示的区域,i在定时器里面 ...

  10. xml生成方式二（Xml序列化器XmlSerializer）

    一.andoirdAPI提供了xml生成和解析的API: XmlSerializer xs = Xml.newSerializer();和XmlPullParser xmlPullParser = X ...