实现来回拖放图片

<!DOCTYPE HTML>

<html>

    <title>来回拖放元素</title>

    <meta charset="utf-8">

<head>

<style type="text/css">

#div1 {width:198px; height:200px;padding:10px;border:1px solid #aaaaaa;}

#div2 {width:198px; height:200px;padding:10px;border:1px solid #aaaaaa;}

img:hover{cursor: pointer;}

</style>

<script type="text/javascript">

function allowDrop(ev)

{

ev.preventDefault();

}

function drag(ev)

{

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

}

function drop(ev)

{

ev.preventDefault();

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

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

}

</script>

</head>

<body>

<p>请把 W3School 的图片拖放到矩形中：</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<br />

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">

    <img id="drag1" src="1.jpg" draggable="true" ondragstart="drag(event)" />

</div>

</body>

</html>

HTML拖放元素的更多相关文章

  1. web前端学习（二）html学习笔记部分（5）--拖放元素、canvas画布使用

    1.2.11  拖放 1.2.11.1  html拖放 1.2.11.2  html拖放本次资源 showOjb(一个对象)展示一下一个对象的信息. 1.2.12  html画布(canvas)  标 ...

  2. HTML5自学笔记[ 9 ]HTML5实现元素的拖放

    要想在html5中实现元素的拖放,被拖放元素就必须设置属性draggable="true";被拖放元素被放置的地方是另外一个元素,该元素是目标元素:这两个元素在拖放过程中都会触发不 ...

  3. Selenium常用操作汇总二——如何把一个元素拖放到另一个元素里面(转)

    Q群里有时候会有人问,selenium  webdriver怎么实现把一个元素拖放到另一个元素里面.这一节总一下元素的拖放. 下面这个页面是一个演示拖放元素的页面,你可以把左右页面中的条目拖放到右边的 ...

  4. selenium webdriver学习（十）------------如何把一个元素拖放到另一个元素里面(转)

    selenium webdriver学习(十)------------如何把一个元素拖放到另一个元素里面 博客分类: Selenium-webdriver 元素拖放drag and drop  Q群里 ...

  5. Selenium操作页面元素

    转自:http://blog.sina.com.cn/s/blog_6966650401012a7q.html 一.输入框(text field or textarea) //找到输入框元素: Web ...

  6. HTML5原生拖放实例分析

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

  7. h5拖放-基础知识

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. 鼠标拖放div 实现

    Javascript的mousemove事件类型是一个实时响应的事件,当鼠标指针的位置发生变化时(至少移动1个像素),就会触发mousemove事件.该事件响应的灵敏度主要参考鼠标指针移动速度的快慢, ...

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

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

随机推荐

  1. Android与IOS的优缺点比较 对 Android 与 IOS 比较是个个人的问题。 就好比我来说，我两个都用。我深知这两个平台的优缺点。所以，我决定分享我关于这两个移动平台的观点。另外，然后谈谈我对新的 Ubuntu 移动平台的印象和它的优势。 IOS 的优点 虽然这些天我是个十足的 Android 用户，但我必须承认 IOS 在某些方面做的是不错。首先，苹果公司在他们的设备更新方面有更

    Android与IOS的优缺点比较 对 Android 与 IOS 比较是个个人的问题. 就好比我来说,我两个都用.我深知这两个平台的优缺点.所以,我决定分享我关于这两个移动平台的观点.另外,然后谈谈 ...

  2. 配置 app.js 文件

    pp.js 中存放全局的 JavaScript 逻辑. 示例: App({ onLaunch: function () { console.log('SWAN launch'); }, onShow: ...

  3. BZOJ 2097: [Usaco2010 Dec]Exercise 奶牛健美操 二分 + 贪心 + 树上问题

    Code: #include<bits/stdc++.h> using namespace std; #define setIO(s) freopen(s".in",& ...

  4. ELK整合Filebeat监控nginx日志

    ELK 日志分析 1. 为什么用到 ELK 一般我们需要进行日志分析场景:直接在日志文件中 grep. awk 就可以获得自己想要的信息.但在规模较大的场景中,此方法效率低下,面临问题包括日志量太大如 ...

  5. CSS的一些单位，如rem、px、em、vw、vh、vm

    总结了一下一些单位的不同 px:像素(pixel)相对长度单位,,是相对于屏幕显示器分辨率而言的: em:em的值并不是固定的,会集成父级元素的字体大小: 注意: 1.body选择其中声明Font-s ...

  6. tomcat安全配置参考

    0x01 基本配置 1 删除默认目录 安装完tomcat后,删除$CATALINA_HOME/webapps下默认的所有目录文件  rm -rf /srv/apache-tomcat/webapps/ ...

  7. POJ 1434 Fill the Cisterns! （模拟 or 二分）

    Fill the Cisterns! 题目链接: http://acm.hust.edu.cn/vjudge/contest/129783#problem/F Description During t ...

  8. 13 November

    [HEOI2015] 定价 BZOJ 4027: 在市场上有很多商品的定价类似于 999 元.4999 元.8999 元这样.它们和 1000 元.5000 元和 9000 元并没有什么本质区别,但是 ...

  9. 史上最详细的XGBoost实战

    史上最详细的XGBoost实战 0. 环境介绍 Python 版 本: 3.6.2 操作系统 : Windows 集成开发环境: PyCharm 1. 安装Python环境 安装Python 首先,我 ...

  10. mysqladmin processlist; show processlist/status/open tables/engine/variables/table status/columns/grants/index/privileges/innodb status/logs/warnings/////; 结果筛选

    mysqladmin showprocesslist可查看完整sql需要权限. SHOW PROCESSLIST显示哪些线程正在运行.您也可以使用mysqladmin processlist语句得到此 ...