实现来回拖放图片

<!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. python+selenium实现发送一封带附件的邮件

    163邮件登录首页 登录成功断言是否有退出按钮 点击退出退出登录 from selenium import webdriver import unittest import time class Vi ...

  2. macOS搭建Hugo

    Hugo 是一个用Go语言编写的静态网站生成器.类似的静态网站生成器还有Jekyll.hexo等等. Hugo官方主页:https://gohugo.io/ 1.安装homebrew: https:/ ...

  3. scanf() 与 gets()--转载

    scanf( )函数和gets( )函数都可用于输入字符串,但在功能上有区别.若想从键盘上输入字符串"hi hello",则应该使用__gets__函数. gets可以接收空格:而 ...

  4. C++ 对象间通讯机制 框架实现

    // SignalSlot.h: interface for the CSignalSlot class. // /////////////////////////////////////////// ...

  5. VMware 15 安装 macOS 10.14优质教程链接集合

    https://www.jianshu.com/p/25d2d781bd98 https://mp.weixin.qq.com/s/91Qc7L7E0xbVYXUcReUb_w https://blo ...

  6. [CSP-S模拟测试]:玩具（概率DP）

    题目描述 这个故事发生在很久以前,在$IcePrincess\text{_}1968$和$IcePrince\text{_}1968$都还在上幼儿园的时候. $IcePrince\text{_}196 ...

  7. android发送udp，tcp消息

    发送方创建步骤: 1.  创建一个DatagramSocket对象 DatagramSocket socket = new  DatagramSocket (4567); 2.  创建一个 InetA ...

  8. vue路由实例

    router.js: import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home ...

  9. codeblocks-error: Illegal byte sequence

    error: converting to execution character set: Illegal byte sequence 对于源码包含有中文编译过程中出现如上的错误 解决办法:在Comp ...

  10. 【C++进阶：移位运算符的用法】

    数据在计算机中以补码存储 移位运算符:<<  左移运算符 >>  右移运算符 一丶 << 左移运算符 移位规则:左边抛弃,右边补零 int num=10; num& ...