实现来回拖放图片

<!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. 七夕-心形表白-简单css代码

    今天你要和谁过? 今天你要怎么过?? 今天去哪里吃??? 公司的三连问,对于一些单身狗有点招架不住啊. 在此送上一个薄礼,来安慰下受伤的心灵... 确定是安慰不是连环打击嘛..... 回答:确定! 来 ...

  2. [luogu]P3941 入阵曲[前缀和][压行]

    [luogu]P3941 入阵曲 题目描述 小 F 很喜欢数学,但是到了高中以后数学总是考不好. 有一天,他在数学课上发起了呆:他想起了过去的一年.一年前,当他初识算法竞赛的 时候,觉得整个世界都焕然 ...

  3. (转)sqlite developer注册方法

    本文转载自:http://blog.csdn.net/fm0517/article/details/7912525 删除注册表中HKEY_CURRENT_USER\SharpPlus\SqliteDe ...

  4. 二十九、pycharm中报错“too many blank lines (3) ”等类似错误

    报错如下图: 解决方法一: 鼠标移至报错处,按住Alt+enter键,选择ignore errors like this 方法二:找到设置File - Settings…… - Editor - In ...

  5. 【转】mackbook wifi卡死未响应的问题

    原文:http://tieba.baidu.com/p/6140144143?traceid= 1. wifi未响应了,紧急处理法:打开活动监视器,搜索airportd,结束掉进程 2. 彻底解决办法 ...

  6. 错误 error: The following untracked working tree files would be overwritten by merge:README.md

    问题类型 相信很多小伙伴在创建新的git仓库后,会选上添加README.md文件,开始我也没太在意,应该也没有什么问题. 但是当我通过git添加远程仓库,给这个仓库上传代码时,出现了如下问题:erro ...

  7. 【SQL SERVER】 搭建AlwaysON高可用组

    项目需要保障数据的高可用,于是可选的方案无非是Oracle集群. 传统的主从+心跳切换访问点以及SQL Server AlwaysOn这类方案.(//经验不多,了解和实践过的方案就这类,轻拍) Ora ...

  8. Codeforces Round #573

    http://codeforces.com/contest/1191 A 给一个数,可以加0,1或2然后取模,再映射到字母,字母有排名,求最大排名. 总共只有4种情况,讨论即可 #include< ...

  9. CAS KVM 虚拟机的保护与恢复

    目录 目录 方式一 方式二 方式一 思路:以 QCOW2 格式来备份和恢复被保护的 KVM 虚拟机 Step1:centos7_0(base qcow2) 以 qcow2 格式写入到 iSCSI 设备 ...

  10. Delphi XE2 之 FireMonkey 入门(17) - 特效

    刚打开 XE2 时, 就从 Tool Palette 窗口的 Effects 组中发现洋洋洒洒的六十多个特效... 每个特效分别对应一个类, 分别来自 FMX.Effects 和 FMX.Filter ...