<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. 无线渗透--wifiphisher之wifi钓鱼获取wifi密码

    本来是想试验一下暴力破解的,但是由于字典太大,跑的时间也比较长,于是使用了钓鱼的方法. 先说一下wifiphisher钓鱼获取wifi密码的原理: wifiphisher对于你在攻击中选定的wifi会 ...

  2. 四 String类

    1 关于String类

  3. JSONObject.fromObject() 转string时，实体里面的时间错乱的问题

    在把要入库的数据实体转成JSON字符串发给kafka的时候,出现了问题,转换完以后,就变成这样子的了,真的是第一次见到这种,真的是长见识了 然后百度了一下:https://www.cnblogs.co ...

  4. JavaScript 转义字符

    转义字符是字符的一种间接表示方式.在特殊语境中,无法直接使用字符自身.例如,在字符串中包含说话内容. "子曰:"学而不思则罔,思而不学则殆."" 由于 Java ...

  5. MIT课程

    8.02  Physics II (电磁学基础) Introduction to electromagnetism and electrostatics: electric charge, Coulo ...

  6. WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! 的解决办法

    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ WARNING: REMOTE HOST IDENTIFICATION HAS ...

  7. JavaScript深入理解对象方法——Object.entries()

    Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for...in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环也枚举原型链中的属性) 示例 ...

  8. 017、MySQL取第4本季度开始和结束日期

    #取第4本季度开始和结束日期 SELECT QUARTER ( adddate( dy, ) ) QTR, date_add( dy, INTERVAL MONTH ) Q_start, adddat ...

  9. java注解——内置注解和四种元注解

    java内置注解: @Override(重写方法):被用于标注方法,用于说明所标注的方法是重写父类的方法 @Deprecated(过时方法):用于说明所标注元素,因存在安全问题或有更好选择而不鼓励使用 ...

  10. Arrays类常用方法

    Arrays类 3.1 概述 java.util.Arrays 此类包含用来操作数组的各种方法,比如排序和搜索等.其所有方法均为静态方法. 3.2 操作数组的方法 1.将参数数组变成字符串 publi ...