实现来回拖放图片

<!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. BZOJ 2097: [Usaco2010 Dec]Exercise 奶牛健美操 二分 + 贪心 + 树上问题

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

  2. POJ 2385 Apple Catching ( 经典DP )

    题意 : 有两颗苹果树,在 1~T 的时间内会有两颗中的其中一颗落下一颗苹果,一头奶牛想要获取最多的苹果,但是它能够在树间转移的次数为 W 且奶牛一开始是在第一颗树下,请编程算出最多的奶牛获得的苹果数 ...

  3. Bellman-ford算法、SPFA算法求解最短路模板

    Bellman-ford 算法适用于含有负权边的最短路求解,复杂度是O( VE ),其原理是依次对每条边进行松弛操作,重复这个操作E-1次后则一定得到最短路,如果还能继续松弛,则有负环.这是因为最长的 ...

  4. docker 安装MongoDB以及设置用户

    MongoDB 是一个免费的开源跨平台面向文档的 NoSQL 数据库程序. 1.查看可用的 MongoDB 版本 访问 MongoDB 镜像库地址: https://hub.docker.com/_/ ...

  5. Linq in not in\like not like

    别人的博客 http://blog.163.com/lesheng@126/blog/static/357364652010102111051668/ using System.Data.Linq.S ...

  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中的udev（unix devices）

    最开始的时候,linux预先定义了很多种设备文件,(不管这种设备是否存在), 在/dev/下 但是即使这些设备文件不存在, 这样/dev下的文件就会很多, 而且像upan在插拔顺序不同, 所对应的映射 ...

  8. 在阿里云centOS7上部署Redis 5.0.5主从 + 哨兵模式

    一.在两台服务器上分别安装.配置Redis 5.0.5 ,为一主一从 安装Redis关键命令: 将安装包上传至:/home 目录下解 压:.tar.gz 安装依赖:yum install gcc 安装 ...

  9. floding regions

  10. java8 list转Map报错Collectors.toMap :: results in "Non-static method cannot be refernced from static context"

    1.问题:java8 list转Map 报错Collectors.toMap :: results in "Non-static method cannot be refernced fro ...