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. SSAS系列——【02】多维数据（维度对象）

    原文:SSAS系列——[02]多维数据(维度对象) 1.维度是什么? 数学中叫参数,物理学中是独立的时空坐标的数目.0维是一点,1维是线,2维是一个长和宽(或曲线)面积,3维是2维加上高度形成体积面. ...

  2. 七牛云存储C#例用小例子 C#笔记

    最近有需求要把网站的图片传到云存储上去.于是就找到了七牛.看上面的SDK...看了才发现里面注释很少.当时看的头大.在网上搜一下,基本上没有好的例子.给初学者带来很大的不便!不过最后还是做出来了.在这 ...

  3. 自动引用计数(ARC)

    1.1什么是自动引用技术 顾名思义,自动引用计数(ARC, Automatic Reference Counting)是指内存管理中对引用采取自动计数的技术.以下摘自苹果官方说明: 在Objectiv ...

  4. 逗比学树莓派之GPIO

           wiringPi适合那些具有C语言基础,在接触树莓派之前已经接触过单片机或者嵌入式开发的人群.wiringPi的API函数和arduino很相似,这也使得它广受欢迎.作者给出了大量的说明 ...

  5. Windows WDDM显卡驱动框架及GPUView工具的使用(1)

    也许这个夏天会写一些东西,这里先说说我做过些什么,知道些什么. 过去的五年里,先后在Vista,Win7和Win8上写过显卡驱动,包括umd和kmd的驱动,积累了大量关于WDDM的经验. 我知道WMM ...

  6. centos6的安装，一步一图，有图有真相

      打开虚拟机VMware,点击文件,选择[新建虚拟机],如图所示

  7. MVC+UnitOfWork+Repository+EF

    MVC+UnitOfWork+Repository+EF UnitOfWork+Repository模式简介: 每次提交数据库都会打开一个连接,造成结果是:多个连接无法共用一个数据库级别的事务,也就无 ...

  8. 萧墙HTML5手机发展之路（53）——jQueryMobile页面之间的参数传递

    基于单个页面模板HTTP通过路POST和GET请求传递参数.在多页模板,并且不需要server沟通,通常有三种方式在多页模板来实现页面之间的参数传递. 1.GET道路:上一页页生成参数并传递到下一个页 ...

  9. 使用Windows2003创建AD服务器 - 进阶者系列 - 学习者系列文章

    Windows 2003的AD功能不是很强,但是还是提供了不错的功能.下面简要介绍下Windows 2003的AD配置说明. 1.  从添加删除Windows组件安装AD功能项 2.  完成安装.这里 ...

  10. 自己写CPU第九阶段（5）——实现负载存储指令2（改变运行阶段）

    我们会继续上传新书<自己动手写CPU>.今天是第42篇.我尽量每周四篇,可是近期已经非常久没有实现这个目标了,一直都有事.不好意思哈. 开展晒书评送书活动,在q=%E4%BA%9A%E9% ...