<html>
<head>
<style>
.droptarget {
    float: left;
    width: 100px;
    height: 35px;
    margin: 15px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<p>在两个矩形框中来回拖动 p 元素:</p>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" draggable="true" id="dragtarget">拖动我!</p>
</div>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p style="clear:both;"><strong>注意：</strong>Internet Explorer 8 及更早 IE 版本或 Safari 5.1 及更早版本的浏览器不支持 drag 事件。</p>
<p id="demo"></p>
<script>
function dragStart(event) {
    event.dataTransfer.setData("Text", event.target.id);
    document.getElementById("demo").innerHTML = "开始拖动 p 元素";
}

function allowDrop(event) {
    event.preventDefault();
}

function drop(event) {
    event.preventDefault();
    var data = event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
    document.getElementById("demo").innerHTML = " p 元素已被拖动";
}
</script>
</body>
</html>

HTML拖放的更多相关文章

  1. HTML5_06之拖放API、Worker线程、Storage存储

    1.拖放API中源对象与目标对象事件间的数据传递: ①创建全局变量--污染全局对象:  var 全局变量=null;  src.ondragstart=function(){   全局变量=数据值;  ...

  2. HTML5_05之SVG扩展、地理定位、拖放

    1.SVG绘图总结: ①方法一:已有svg文件,<img src="x.svg">  方法二:<body><svg></svg>&l ...

  3. HTML5权威指南--标签新变化,文件API,拖放API(简要学习笔记一)

    1.标签元素更加语义化   2.内容类型仍然为“text/html”    扩展符仍然为html或者htm.    <1>DOCTYPE 声明<!DOCTYPE html>就可 ...

  4. HTML5 之拖放(drag与drop)

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

  5. 深入理解javascript原生拖放

    × 目录 [1]拖放源 [2]拖放目标 [3]dataTransfer对象[4]改变光标 前面的话 拖放(drag-and-drop,DnD)其实是两个动作——拖和放.所以,它涉及到两个元素.一个是被 ...

  6. 炫酷的html5（Drag 和 drop）拖放

    在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放.也是一种常见的特性,即抓取对象以后拖到另一个位置. 浏览器支持 Internet Explorer 9.Firefox.Opera 12.C ...

  7. 基于jquery实现图片拖动和曲线拖放

    功能:图片的拖动.曲线的拖放和绘制 一. 准备工作 1. 点击此下载相关的文档 二. 在浏览器中运行 dragDrop.html 文件,即可看到效果 三. 效果图

  8. html 5 实现拖放效果

    在html5中要实现拖放操作,相对于以前通过鼠标操作实现,要简单得多,数据安全性也更有保障.只需要以下几步即可. 给被拖拽元素添加draggable属性,如果是文件拖放. 在拖拽元素的dragstar ...

  9. 【Win10应用开发】通过拖放来打开文件

    除了可以使用XXXFilePicker来浏览文件外,其实在UWP APP中,也可以向传统Windows窗口一样,通过拖放的方式来打开文件. 处理过程和WPF的原理差不多,毕竟都是一脉相承,于是,在学习 ...

  10. Vue.js学习笔记（8）拖放

    小颖在目前负责的项目中,负责给同事提供所需组件,在这期间,我们家大颖姐姐让我 写个拖拽组件,一开始我是用click实现,先将你要拖拽的dom点一下,然后再点你要放的位置,这个dom再通过小颖写的方法, ...

随机推荐

  1. 使用Spring JMS轻松实现异步消息传递

    异步进程通信是面向服务架构(SOA)一个重要的组成部分,因为企业里很多系统通信,特别是与外部组织间的通信,实质上都是异步的.Java消息服务(JMS)是用于编写使用异步消息传递的JEE应用程序的API ...

  2. SciPy 基础功能

    章节 SciPy 介绍 SciPy 安装 SciPy 基础功能 SciPy 特殊函数 SciPy k均值聚类 SciPy 常量 SciPy fftpack(傅里叶变换) SciPy 积分 SciPy ...

  3. MySQL 通过SQL语句导出表为文件

    SELECT * //你要导出的字段 FROM `tabel` //表名 INTO OUTFILE "D:\\file.txt" //导出的文件路径和文件名 LINES TERMI ...

  4. CodeForces - 876E National Property（2-sat）

    题意:有n个有小写字母组成的字符串,将部分小写字母改成对应的大写字母,注意某种小写字母更改,所有的这种小写字母都会更改.若能使这给定的n个字符串符合字典序由小到大排序,则输出Yes,并输出需要修改的字 ...

  5. hostPath Volume【转】

    hostPath Volume 的作用是将 Docker Host 文件系统中已经存在的目录 mount 给 Pod 的容器.大部分应用都不会使用 hostPath Volume,因为这实际上增加了 ...

  6. docker 运行ubuntu镜像 apt-get update 问题

    docker运行ubuntu镜像后,apt-getupdate出现问题如下: 根据上面的报错大概是因为....文件上没有生效(生效还需要10d 13h 33min 45s),看来是时间不够啊,需要等待 ...

  7. java内部类 2.19

    1.定义了成员内部类后,必须使用外部类对象来创建内部类对象,而不能直接去 new 一个内部类对象,即:内部类 对象名 = 外部类对象.new 内部类( ); //外部类HelloWorld publi ...

  8. HttpClient测试

    导入maven依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson&l ...

  9. 使用Hibarnate: 出现 java.sql.SQLException: ORA-00911: 无效字符, 解决思路

    1. 查看到: Hibernat自动生成的sql查询语句 Hibernate: select * from ( select module0_.MODULE_ID as MODULE_ID1_1_, ...

  10. NO13 Linux的基础优化-关闭SELinux功能-Linux的7种运行级别-防火墙设置-中文显示设置

    壹  安装Linux系统后调优及安全设置: 1 关闭SELinux功能: [root@localhost data]# sed 's#SELINUX=enforcing#SELINUX=disable ...