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. C/S模式开发中如何利用WebBrowser控件制作导航窗体

    原文:C/S模式开发中如何利用WebBrowser控件制作导航窗体 转自: CSDN 相信不少同学们都做过MIS系统的开发,今天这里不讨论B/S模式开发的问题.来谈谈winform开发.用过市面上常见 ...

  2. winhec

    #winhec# 开发人员刷屏看点 (视频) 今天大家已经被winhec刷屏了,本来不想写这篇了,但看了所有的文章,大家关注的都是windows 10的那些新功能,小米win10刷机,联想千元手机,小 ...

  3. linux 在系统启动过程

    从学习<鸟哥linux私人厨房> 用于在计算机系统启动,计算机硬件和软件由(它包含的操作系统软件)包括.对于操作系统在同一台计算机硬件方面的表现,该系统配备有硬件是公用,不同的系统是 的操 ...

  4. 经验总结35--IP地址区域匹配

    想知道客服端訪问的IP地址是多少,并知道区域. 一般能够去http://www.ip138.com/,输入IP查询,但没提供比較好的接口,程序使用不方便. 另外有些企业提供一些离线的IP数据库,能够进 ...

  5. 新手sqlserver数据库dba需要注意的小细节

    前言:任何的优化和修改都是以业务情况为前提,可能有的写的有误或者不准确的地方,欢迎各位来拍砖. 1.在创建db的时候自增长建议设置成按MB(M)增长,步长根据业务量来设置,一般情况建议设置100-20 ...

  6. QT自动补全设置

    在工具 -> 选项 -> 环境 -> 键盘 中,找到TextEditor -> CompleteThis,修改后面的快捷键就好了 我将它修改为Alt + /

  7. 如何配置Spring的XML文件及使用

    App.config <?xml version="1.0" encoding="utf-8" ?> <configuration> & ...

  8. 【转】Android Application 对象介绍

    What is Application Application和Activity,Service一样是android框架的一个系统组件,当android程序启动时系统会创建一个 application ...

  9. ASP.NET MVC Model绑定

    ASP.NET MVC Model绑定(一) 前言 ModelMetadata系列的结束了,从本篇开始就进入Model绑定部分了,这个系列阅读过后你会对Model绑定有个比较清楚的了解, 本篇对于Mo ...

  10. 基于Jquery 简单实用的弹出提示框

    基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...