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. hdu 4893 Wow! Such Sequence!

    http://acm.hdu.edu.cn/showproblem.php?pid=4893 三种操作: 1 k d - "add" 2 l r - "query sum ...

  2. 在WAMPSERVER下增加多版本的PHP（PHP5.3，PHP5.4，PHP5.5）支持。

    原文:在WAMPSERVER下增加多版本的PHP(PHP5.3,PHP5.4,PHP5.5)支持. WAMPServer可以让开发者在Windows系统下快速搭建WAMP环境,它支持多版本的Apach ...

  3. AForge.NET 工具源码下载

    AForge.NET是一个专门为开发者和研究者基于C#框架设计的,这个框架提供了不同的类库和关于类库的资源,还有很多应用程序例子,包括计算机视觉与人工智能,图像处理,神经网络,遗传算法,机器学习,机器 ...

  4. 写给初学前端工程师的一封信 (转于Kejun)

    大家好: 应波波的邀请写一写我对这个话题的想法.从去年开始不少朋友让我帮忙介绍前端工程师,绝大部分忙都没帮上,原因是真找不到人.我当时是这么跟他们分析的:过去的客户端以browser为主,所以HTML ...

  5. Junit指定测试运行顺序

    原文链接: Test execution order原始日期: 2012年12月06日本期: 2014年7月2日翻译人员: 铁锚 说明: Junit4.11版本号及以后才支持,建议升级到最新版本号. ...

  6. Nancy入门

    Nancy入门 当我们要接到一个新的项目的时候,我们第一时间想到的是用微软的MVC框架,但是你是否想过微软的MVC是不是有点笨重?我们这个项目用MVC是不是有点大材小用?有没有可以替代MVC的东西呢? ...

  7. jQuery EasyUI API - Layout - Layout[原创汉化官方API]

    最近在学习jQuery EasyUI,发现中文的文档好少,部分文档不错但它是鸟语的,为了大家也为了自己学习吧,汉化做一下笔记. 有没有说清楚的,或者翻译不正确的地方还请大家谅解指出.. 由于工作时间原 ...

  8. [译]ava 设计模式之职责链

    (文章翻译自Java Design Pattern: Chain of Responsibility) 职责链模式的主要设计思想是为了构建一连串的处理单元,如果阈值满足的话那么这个单元就来处理这个请求 ...

  9. Linux内核头文件与内核与库的关系

    看上一篇文章中对buildroot的介绍,里面的文档第 3.1.1.1 Internal toolchain backend 节内容 C库会去访问Linux kernel headers(*.h)文件 ...

  10. springmvc和servlet在上传和下载文件（保持文件夹和存储数据库Blob两种方式）

    参与该项目的文件上传和下载.一旦struts2下完成,今天springmvc再来一遍.发现springmvc特别好包,基本上不具备的几行代码即可完成,下面的代码贴: FileUpAndDown.jsp ...