HTML5拖放

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title> HTML5 拖放 </title>

<style type="text/css">

body { margin: 0; padding: 0;}

#tagetDrag { width: 200px; height: 200px; border: 1px #ccc solid;}

#oDrag { width: 100px; height: 100px; border: 1px red solid; background: #f3f3f3;}

</style>

</head>

<body>

<div id="tagetDrag"></div>

<div id="oDrag"></div>

<script type="text/javascript">

    //设置可拖动元素oDrag的draggable属性为true

    var oDragDiv = document.getElementById("oDrag"),otagetDragDiv = document.getElementById("tagetDrag");

    oDragDiv.draggable = 'true';

    //拖动什么，当ondragstart时设置setData()

    oDragDiv.ondragstart = function (ev){

        ev.dataTransfer.setData("Text", ev.target.id);

    }

    //要放到哪里 ondragover

    otagetDragDiv.ondragover = function (ev){

       ev.preventDefault(); //阻止默认

    }

    //开始放置 ondrop

    otagetDragDiv.ondrop = function (ev){

       ev.preventDefault(); //阻止默认

       var data = ev.dataTransfer.getData("Text");

       ev.target.appendChild(document.getElementById(data));

    }

</script>

</body>

</html>

HTML5拖放的更多相关文章

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

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

  2. HTML5 拖放

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

  3. HTML5拖放API

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

  4. HTML5 拖放及排序的简单实现

    HTML5 拖放及排序的简单实现 之前写过个类似的例子,看这里. 但想再深入一步,希望能通过拖放,来交换二个元素的位置.最好有应用到手机平台上. 作了个简单的例子,在手机上测试的时候不成功..查了好多 ...

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

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

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

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

  7. HTML5: HTML5 拖放

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

  8. html5 拖放学习

    html5拖放 需要有可拖放元素,可放置的位置(可多个),就像是一个苹果,多个箱子,苹果可以在箱子间来回放置,同样元素也可在多个可放置位置间来回拖放. 如果只有一个位置,元素只可被从原位置托放置唯一目 ...

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

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

随机推荐

  1. Eclipse启动jboss局域网无法访问的问题

    在启动jboss的时候加上参数 -b 0.0.0.0(本地用localhost也能访问,用ip也能访问)

  2. 导出C++ dll文件

    方法1. 直接新建 Qt dll library, 使用工程自动创建的宏定义 方法2. (1)新建一个Empty的Win32项目(如ExampleDLL),选择Application type 为DL ...

  3. Java---字节输入，文件操作，病毒制造，请谨慎运行！

    今天刚刚学了Java文件操作,跟着老师的思路,迫不及待的制造了这个小病毒. 用到的是一些小知识,很简单. 创建文件和文件夹,向文件中写入字节. 我已渐渐的爱上了编程!!! 下面附上完整代码: impo ...

  4. USACO月赛数据

    终于找到了usaco月赛的数据…… 根据月赛的名称,我们可以写出数据地址.比如08年一月的月赛即是:http://contest.usaco.org/JAN08  这里要注意区分大小写.

  5. 深度优先搜索DFS

    使用递归(隐式地使用栈) 时间代价O(E+V) 输入:图G.起点start(int) 算法过程DFS(G, start) 1. 访问start节点,color[start]=visited 2.  p ...

  6. 《Euclidea3》-Eta-07

    Q: 分析:考虑到充分利用三等分和角度的信息,这里我们只需做出一个36°的角即可. 考虑一个顶角是36°的等腰三角形.如下图. 设AD=a1,CD=a2,根据相似,易得a1:a2=(√5-1)/2. ...

  7. top -bcn -1

    ^[[?1h^[=^[[?25l^[[H^[[2J^[(B^[[mtop #!/bin/bash#echo 性能数据捕捉时间: `date +%Y-%m-%d_%H:%M:%S` \n >> ...

  8. 360. Sort Transformed Array

    一元二次方程...仿佛回到了初中. 主要看a的情况来分情况讨论: =0,一次函数,根据b的正负单调递增递减就行了. <0,凸状..从nums[]左右两边开始往中间一边比较一边 从右往左 放: 0 ...

  9. javaIO流小结(1)

    UTF-8的字节占多少个字节? 常用中文字符用utf-8编码占用3个字节(大约2万多字),超大字符集中要占4个字节.在内存中是2个字节,真正写到硬盘上面的是3个字节. GBK.GB2312汉字占2个字 ...

  10. OpenMP与C++：事半功倍地获得多线程的好处

    来源:IIEEG 01-28-2011 在并行计算领域有一个广为流传的笑话——并行计算是未来之事并且永远都是.这个小笑话几十年来一直都是对的.一种类似的观点在计算机架构社区中流传,处理器时钟速度的极限 ...