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

　　

之后：

　　上代码：

<!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. 在linux上手动搭建svn服务器

    svn服务器的搭建 环境: linux CentOS 7 安装: 1.安装svn服务器 yum install subversion 2.查看版本 svnserve --version 3.创建版本库 ...

  2. Hadoop2.4.1伪分布式安装

    本教程的前提是已经在VMware虚拟机上安装了centos6.5,centos的安装过程这里不再赘述 一.准备Linux环境 1.点击VMware快捷方式,右键打开文件所在位置 -> 双击vmn ...

  3. 总结一下现在关于Design Support Library的几个博客

    原文转载:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0713/3179.html 关于Design Support Libr ...

  4. oracle如何连接别人的数据库，需要在本地添加一些配置

    2.oracle如何连接别人的数据库,需要在本地添加一些配置 1.找到 listener.ora 文件,打开(一般在 C 文件夹) ORCL = (DESCRIPTION = (ADDRESS = ( ...

  5. 【java提高】---ArrayList源码

    ArrayList源码 一.定义 public class ArrayList<E> extends AbstractList<E> implements List<E& ...

  6. 网友"就像一支烟"山寨币分析估值方法

    [注:素材取自QQ群,2017年12月28日的聊天记录."就像一支烟"分享了自己的山寨币分析估值方法.因为删去了其他人的聊天记录,部分文字可能断章取义,仅供参考,具体情况请自行分析 ...

  7. 使用SplitContainer来实现隐藏窗口的部分内容（转）

    有两种方法: (1) Splitter:比较老的方法 (2) SplitContainer:比较新的方法 最终界面如下: 方法一:使用Splitter实现 (1) 在窗口中添加一个Panel控件,即P ...

  8. C:数据结构与算法之顺序表

    顺序表作为数据结构的开端,说明这里面很多基础要学,初学者一开始都会混淆,今天我们来一步一步来建立一个完整的顺序表,可以任我们控制的顺序表,首先先定义一个顺序表 /* Note:Your choice ...

  9. HTML列表的常用属性及其应用

    首先列表分成有序和无序分别是<ol><ul>,无序的比较简单,看个例子: <html> <body> <h4>一个无序列表:</h4& ...

  10. ArcGIS API for JavaScript 4.2学习笔记[13] Layer的弹窗（PopupTemplate）

    上一篇文章中讲到Popup是一个弹窗,是View对象的默认内置弹窗,并且在View对象构造时就顺便构造了. 那么这个PopupTemplate是什么呢? 后半截单词Template是"模板& ...