<!DOCTYPE html>
<html class="no-js"> <head>
<meta charset="utf-8">
<title>HTML5-draggable(拖放)</title>
<style type="text/css">
#div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script src="js/modernizr.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*
* 虽然已经设定了img元素可被拖动,但是浏览器默认地,无法将数据/元素放置到其他元素中。
* 如果有需要设置某些元素可接受被拖动元素,则要阻止它的默认行为,
* 这要通过设置该接收元素的ondragover 事件,调用event.preventDefault() 方法
*/
function allowDrop(ev) {
ev.preventDefault(); //阻止默认行为 //ev.target.id
//此处ev.target是接收元素,通过事件被绑定在哪个元素即可区分
} /*
* 当该img元素被拖动时,会触发一个ondragstart 事件,该事件调用了一个方法drag(event)。
*/
function drag(ev) {
//ev.dataTransfer.setData() 方法设置被拖数据的数据类型(Text)和值(被拖元素id),
//该方法将被拖动元素的id存储到事件的dataTransfer对象内,ev.dataTransfer.getData()可将该元素取出。
//此处ev.target是被拖动元素
ev.dataTransfer.setData("Text", ev.target.id);
} /*
* 当被拖元素移动到接收元素,
* 松开鼠标时(即被拖元素放置在接收元素内时)会出发ondrop事件
*/
function drop(ev) {
ev.preventDefault(); //阻止默认行为
var data = ev.dataTransfer.getData("Text"); //将被拖动元素id取出
ev.target.appendChild(document.getElementById(data)); //将被拖动元素添加到接收元素尾部
}
</script>
</head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<!--为了使元素可拖动,把 draggable 属性设置为 true-->
<img src="http://www.w3school.com.cn/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
</div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html>

HTML5-draggable(拖放)的更多相关文章

  1. HTML5原生拖放实例分析

    HTML5提供了原生拖放功能的JavaScript API,使用起来很方便. 兼容性: 对于PC端浏览器,Firefox.Chrome.Safari支持良好,而IE和Edge浏览器有些特性不支持,如I ...

  2. HTML5 之拖放(drag与drop)

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

  3. HTML5 — 让拖放变的流行起来

    先上 Demo,尽量用 chrome,代码可参考 Github. 在 HTML5 出现之前,页面元素的拖放需要监听 mousedown.mouseover 以及 mouseup 等一系列事件,然后改变 ...

  4. HTML5之拖放

    - Draggable 标签  文件拖放 99年IE5开始,05后所有浏览器支持(除了opera) <li id=be draggable=true ondragstart="star ...

  5. HTML5 元素拖放

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. HTML5 总结-拖放-3

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

  7. HTML5 原生拖放

    前言: HTML5提供专门的拖拽与拖放的API,可以方便的指定某个元素可拖动,可以创建自定义的可拖动元素和放置目标 相关知识点: 1.拖放事件 拖放元素时,将依次触发下列事件 dragstart  按 ...

  8. 【HTML5】拖放(Drag 和 drop)

    效果图: <!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1 { ...

  9. HTML5的拖放事件

    1.给标签添加属性draggable=ture即可允许拖放,有些标签可以不加,例如img有图片.a有url,默认拥有拖放功能 2.事件在被拖动元素上触发 ondragstart ondrag ondr ...

  10. HTML5 的拖放(实例:两个div之间拖放图片)

    重点解释: 首先,为了使元素(如本图片)可拖动,把 draggable 属性设置为 true : dataTransfer.setData() 方法设置被拖数据的数据类型和值: ondragover ...

随机推荐

  1. Java最重要的21个技术点和知识点

    (五)Java最重要的21个技术点和知识点之网络编程.泛型.编程规范相关 写这篇文章的目的是想总结一下自己这么多年JAVA培训的一些心得体会,主要是和一些java基础知识点相关的,所以也希望能分享给刚 ...

  2. Timed Code

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...

  3. js中的命名规范

    在实际开发中规范的命名,不仅方便自己查看,理解变量的实际意义,而且在团队开发中也能提高开发效率. 下面将介绍javascript中的变量的命名规范: 1)首先,变量名要有实际意义,不建议使用单个的字母 ...

  4. 【Android Studio使用教程4】Android Studio下载

    鉴于Android官网上下载很慢,Android Studio等已在网盘分享:Android Studio 网盘下载路径: windows:http://yunpan.cn/cfTszP2wrJxdD ...

  5. DPKG命令与软件安装、APT

    ====Linux软件包==== Linux系统中,软件通常以源代码或者预编译包的形式提供. 软件的源代码通常需要编译为二进制代码才可使用,安装比较耗时.用户可以自行调节编译选项,决定需要的功能或组件 ...

  6. 重构13-Extract Method Object(提取方法对象)

    重构来自于Martin Fowler的重构目录.你可以在这里找到包含简介的原始文章.  在我看来,这是一个比较罕见的重构,但有时却终能派上用场.当你尝试进行提取方法的重构时,需要引入大量的方法.在一个 ...

  7. ASP.NET后台注册JS的方法

    1. 用Response.Write方法 代码如下: Response.Write("<script type='text/javascript'>alert("hel ...

  8. Flips测试类(page43)

    测试用例:所用java类: StdOut,StdIn , Counter, StdRandom, public class Flips { public static void main(String ...

  9. Kinect For Windows V2开发日志四:使用OpenCV显示深度图像

    代码示例: #include <Kinect.h> #include <iostream> #include <opencv2\highgui.hpp> using ...

  10. 在centos7中添加一个新用户并授权

    参考地址:http://www.cnblogs.com/woshimrf/p/5906084.html 创建新用户 创建一个用户名为:zhangbiao [root@localhost ~]# add ...