HTML5 拖放及排序的简单实现

之前写过个类似的例子,看这里.

但想再深入一步,希望能通过拖放,来交换二个元素的位置.最好有应用到手机平台上.

作了个简单的例子,在手机上测试的时候不成功..查了好多资料.暂时未能解决.

效果如下图:

相关代码如下:

html5 drag and drop : 在线演示查看源码

HTML :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title> html5 drag and drop</title>
         
    </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>
    </body>
</html>

JavaScript :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var origin;
$(".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() {
        $(this).removeClass("move");
    });
 
    $(e.target).addClass("move").animate(origin_pos, "fast",
    function() {
        $(this).removeClass("move");
    });
 
}).on("dragstart",
function(e) {
 
    // only dropEffect='copy' will be dropable
    e.originalEvent.dataTransfer.effectAllowed = 'move';
    origin = this;
 
}).on("dragover",
function(e) {
    if (e.preventDefault) e.preventDefault(); // allows us to drop
    e.originalEvent.dataTransfer.dropEffect = 'move'; // only dropEffect='copy' will be dropable
});

CSS :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
*[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 2s;
    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 }
Powered By RunJS
 
 

HTML5 拖放及排序的简单实现的更多相关文章

  1. 【Demo】HTML5拖放--简单demo

    用HTML5拖放功能编写一个简单的拖放Demo 单次拖放demo 效果: ------拖放前------- ------拖放后-------  实现代码: <!DOCTYPE html> ...

  2. HTML5拖放事件（Drag-and-Drop,DnD）

    拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 拖放是在“拖放源(drag source)”和“拖放目标(drop target ...

  3. HTML5拖放API

    拖放事件事件提供了拖放可以控制几乎所有方面的拖放操作.棘手的部分是确定每个事件触发:在拖项目火:别人火下降的目标.拖动项时,以下事件(按照这个顺序): 拖曳开始拖dragend此刻你把鼠标按钮和开始移 ...

  4. HTML5 拖放（Drag 和 Drop）功能开发——基础实战

    随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的 ...

  5. HTML5: HTML5 拖放

    ylbtech-HTML5: HTML5 拖放 1.返回顶部 1. HTML5 拖放(Drag 和 Drop) 拖放(Drag 和 drop)是 HTML5 标准的组成部分.   将 RUNOOB.C ...

  6. HTML5拖放（drag and drop）与plupload的懒人上传

    HTML5拖放能够将本地的文件拖放到页面上,plupload又是很好的文件上传插件,而今天就将两者结合,做了个文件拖拽上传的功能. 简述HTML5拖放 拖放是HTML5标准的一部分,任何元素都能够拖放 ...

  7. HTML5 拖放

    拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 浏览器支持 I ...

  8. HTML5拖放

    HTML5拖放 <!doctype html> <html> <head> <meta charset="UTF-8"> <t ...

  9. List<T>集合的Sort自定义排序用法简单解析

    List<T>集合的Sort自定义排序用法简单解析: 如下:一系列无序数字,如果想要他们倒序排列,则使用如下代码: 那么如何理解这段代码呢? (x,y)表示相邻的两个对象,如果满足条件:x ...

随机推荐

  1. 工作流Jpbm4.4工作流知识点总结（工作流开发宝典）

    原文:工作流Jpbm4.4工作流知识点总结(工作流开发宝典) Jbpm工作流开发过程中的一些知识点总结,方便以后开发使用! 目录: 一.工作流框架的搭建 二.工作流框架的流程开发 1.管理流程定义 ① ...

  2. STL在迭代的过程，删除指定的元素

    直接在Code.在 Picture #include <iostream> #include <list> using namespace std; // STL在迭代的过程中 ...

  3. Struts2_2_第一Struts2应用

    web.xml文件的配置与1同样. 1)HelloWorld类的代码: public class HelloWorldAction { private String message; public S ...

  4. 使用collectd与visage收集kvm虚拟机性能实时图形

    软件功能: 通过collectd软件来监控收集kvm虚拟机的性能数据,包含cpu,memory.磁盘IO.网络流量等 通过visage软件将收集到的数据绘制图形. 安装: 系统环境:ubuntu12. ...

  5. iptables的配置文件/etc/sysconfig/iptables不存在怎么办

    iptables的配置文件/etc/sysconfig/iptables不存在怎么办 首先要看一下iptables是否安装了,使用service iptables status或yum info ip ...

  6. Java实现缓存(类似于Redis)

    Java实现缓存,类似于Redis的实现,可以缓存对象到内存中,提高访问效率.代码如下: import java.util.ArrayList; import java.util.HashMap; i ...

  7. 皴EBS R12应用程序和数据库用户password

    1.假设你有一个EBS周围环境APPS用户password,能够打破用户的应用程序password 参考:Oracle EBS R12下怎样破解用户password 2,假设没有APPS用户passw ...

  8. Android KeyStore Stack Buffer Overflow (CVE-2014-3100)

    /* 本文章由 莫灰灰 编写,转载请注明出处. 作者:莫灰灰    邮箱: minzhenfei@163.com */ 1. KeyStore Service 在Android中,/system/bi ...

  9. ASP.Net TextBox控件只允许输入数字

    原文:ASP.Net TextBox控件只允许输入数字 1.1.在Asp.Net TextBox 控件的 OnKeyPress 事件中指定输入键盘码必须为数字: <asp:TextBox ID= ...

  10. JS中的模块规范（CommonJS，AMD，CMD）

    JS中的模块规范(CommonJS,AMD,CMD) 如果你听过js模块化这个东西,那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯,我也听过,但之前也真的是听听而已. 现在就看看吧, ...