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

　　

之后：

　　上代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title> html5 drag and drop</title>
  6.         <style>
  7.             *[draggable=true] {
  8.                 -moz-user-select:none;
  9.                 -khtml-user-drag: element;
  10.                 cursor: move;
  11.             }
  12.             *:-khtml-drag {
  13.                 background-color: rgba(238,238,238, 0.5);
  14.             }
  15.             a {
  16.                 text-decoration: none;
  17.                 color: #000;
  18.                 width:120px;
  19.                 border: 3px dashed #999;
  20.                 padding: 10px;
  21.                 display:inline-block;
  22.                 transition: all 1s;
  23.                 position:absolute ;
  24.                 top:10px;
  25.             }
  26.  
  27.             .container {
  28.                 position:relative;
  29.             }
  30.             a.move {
  31.                 -webkit-transform:scale3d( 1.1, 1.1, 1.1 );
  32.             }
  33.             a:hover:after {
  34.                 content: ' (drag me)';
  35.                 color: green }
  36.  
  37.         </style>
  38.     </head>
  39.     <body>
  40.         <div class="container">
  41.             <a draggable="true"  id="a1" style='left:0px;'>one</a>
  42.             <a draggable="true"  id="a2" style='left:160px;'>two</a>
  43.             <a draggable="true"  id="a3" style='left:320px;'>three</a>
  44.             <a draggable="true"  id="a4" style='left:480px;'>four</a>
  45.             <a draggable="true"  id="a5" style='left:640px;'>five</a>
  46.         </div>
  47.         <script src="http://code.jquery.com/jquery-2.0.0.js"></script>
  48.         <script>
  49.             var origin, is_moving = false;
  50.  
  51.             $(".container").find("a").on("drop",
  52.             function(e) {
  53.                 var origin_pos = $(origin).position();
  54.                 var target_pos = $(e.target).position();
  55.  
  56.                 $(origin).addClass("move").animate(target_pos, "fast",
  57.                     function() {
  58.                         console.log(this);
  59.                         $(this).removeClass("move");
  60.                     });
  61.  
  62.                 $(e.target).addClass("move").animate(origin_pos, "fast",
  63.                 function() {
  64.                     $(this).removeClass("move");
  65.                 });
  66.  
  67.             }).on("dragstart",
  68.             function(e) {
  69.                 if (is_moving) {
  70.                     return false;
  71.                 }
  72.                 is_moving = true;
  73.  
  74.                 e.originalEvent.dataTransfer.effectAllowed = 'move';
  75.                 origin = this;
  76.  
  77.             }).on("dragover",
  78.             function(e) {
  79.                 if (e.preventDefault) e.preventDefault(); //
  80.                 is_moving = false;
  81.                 e.originalEvent.dataTransfer.dropEffect = 'move'; //
  82.             });
  83.         </script>
  84.     </body>
  85. </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. 基于FPGA的图像显示

    基于FPGA的图像显示 作者:lee神 这几天一直在调试FPGA的图像显示系统,今天终于成功,图像不在闪烁,也不再边框缺失. 基于FPGA的图像处理的第一课应该是基于FPGA的图像显示,只有图像正常显 ...

  2. JAVA入门[17]-ControllerAdvice处理exception

    1.关于@ControllerAdvice @ControllerAdvice注解本身已经使用了@Component,因此@ControllerAdvice注解所标注的类将会自动被组件扫描获取到,就像 ...

  3. 转：Natas Wargame Level28 Writeup(EBC加密破解)

    From:http://alkalinesecurity.com/blog/ctf-writeups/natas-28-getting-it-wrong/ Now that I knew it was ...

  4. 《算法 (第4版)》【PDF】下载

    <算法 (第4版)>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196349 (第4版)>[PDF]"  TITL ...

  5. 【JMeter】source("文件路程")和${变量}同时出现会报错

    source("D:\\apache-jmeter-3.0\\testcase\\java\\Test.java"); //${journeyLen} 以上两句在JMeter脚本里 ...

  6. python for循环巧妙运用（迭代、列表生成式）

    200 ? "200px" : this.width)!important;} --> 介绍 我们可以通过for循环来迭代list.tuple.dict.set.字符串,di ...

  7. mvn命令笔记

    #发布到本地仓库 mvn deploy -DaltDeploymentRepository=snapshots::default::http://mvnrepo.xxx.com/mvn/snapsho ...

  8. Hello 2018, Bye 2017

    2017年过去了,过去一年经历了太多,改变了好多好多,可以说人生进入了另一个阶段,有可能是成熟吧. 回顾2017 去年换了新工作,离开了将近工作了8年的公司,不带走一丝云彩,为其任劳任怨,最后没有任何 ...

  9. 在QComboBox的基础上实现复选功能

    这个是最近的一个项目上需要实现的功能.要求如下: 下拉列表的项目可以多选 显示框不能编辑 所选中的项目在显示框中出现 下面根据网上的提示代码(参照博客 一去二三里),主要实现如下代码(与参照略有不同) ...

  10. 几个关于js数组方法reduce的经典片段

    以下是个人在工作中收藏总结的一些关于javascript数组方法reduce的相关代码片段,后续遇到其他使用这个函数的场景,将会陆续添加,这里作为备忘. javascript数组那么多方法,为什么我要 ...