实现来回拖放图片

<!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. LTE系统时延及降低空口时延的4种方案

    转载:https://rf.eefocus.com/article/id-LTE%20delay 对于移动通信业务而言,最重要的时延是端到端时延, 即对于已经建立连接的收发两端,数据包从发送端产生,到 ...

  2. C++fread/fwrite的基础用法

    前言 fread是吼东西 应某人要求(大概)科普一下 fread #include <iostream> #include <cstdlib> #include <cst ...

  3. 特征提取算法（4）——LoG特征提取算法

    目录 1.介绍 2.LoG原理 3.数学原理 4.模板性质 1.介绍 LoG(DoG是一阶边缘提取)是二阶拉普拉斯-高斯边缘提取算法,先高斯滤波然后拉普拉斯边缘提取. Laplace算子对通过图像进行 ...

  4. javascript中面向对象的两种构建方式（构造函数）和（原型模式的区别）

    1.构造函数模式--->alert的结果为false <!DOCTYPE html> <html lang="en"> <head> &l ...

  5. [CF Round603 Div2 F]Economic Difficulties

    题目:Economic Difficulties 传送门:https://codeforces.com/contest/1263/problem/F 题意:给了两棵tree:Ta(拥有a个节点,节点编 ...

  6. win10+VS2015+opencv3.4.0配置方法

    win10+VS2015+opencv3.4.0配置方法 操作环境: windows10 64位opencv 3.4.0:https://opencv.org/releases.html(选择open ...

  7. linux sed 替换，使用变量，变量中含有特殊字符的处理

    文件 test.sh 内容如下: #!/bin/bash export JAVA_HOME=/data/jdk_1.9.0 echo $JAVA_HOME 想把 JAVA_HOME = 后面的内容替换 ...

  8. customizable route planning 工业界地图产品的路径规划

    https://www.microsoft.com/en-us/research/publication/customizable-route-planning/?from=http%3A%2F%2F ...

  9. 豆瓣镜像安装python库

  10. set集合 浅层拷贝会和深层拷贝

    一.什么是set集合 集合是无序的,不重复的数据集合,它里面的元素是可哈希的(不可变类型),但是集合本身是不可哈希(所以集合做不了字典的键)的.以下是集合最重要的两点: 1.去重,把一个列表变成集合, ...