HTML5 的拖放（实例：两个div之间拖放图片）
重点解释：
首先，为了使元素（如本图片）可拖动，把 draggable 属性设置为 true ：
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
当放置被拖数据时，会发生 drop 事件。
- 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
- 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
- 被拖数据是被拖元素的 id ("drag1")
- 把被拖元素追加到放置元素（目标元素）中
结果----》
拖动前
拖动后
再拖动回去
........
在两个 <div> 元素之间拖放图像--- 代码清单：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
#div1,#div2{ float:left; width:150px; height:50px; margin: 10px; padding: 10px; border: 1px dashed #bbbbbb;}
</style>
<script>
function allowDrag(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head> <body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrag(event)">
<img src="1.jpg" width="120px" height="50px" draggable="true" ondragstart="drag(event)" id="drag1" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrag(event)">
</div> </body>
</html>
HTML5 的拖放（实例：两个div之间拖放图片）的更多相关文章
- jmeter BeanShell实例-----两个变量之间的断言对比
jmeter BeanShell实例-----两个变量之间的断言对比 在jmeter的中,断言没法对两个变量的进行对比后判断,只能使用Bean Shell断言来进行,总是有人来问怎么写呢.这里写一个简 ...
- jmeter BeanShell实例-----两个变量之间的断言对比(转)
jmeter BeanShell实例-----两个变量之间的断言对比 在jmeter的中,断言没法对两个变量的进行对比后判断,只能使用Bean Shell断言来进行,总是有人来问怎么写呢.这里写一个简 ...
- 两个div之间有空隙
加句*{ margin:0; padding:0;} 最近在做网页时发现,在IE7下(FF没试过),div与div之间有时会出20个像素左右的空隙,除非把margin设成负值,否则空隙无法去除.我在 ...
- 并排的两个div之间会有空隙
两个并排的DIV会有如下图所示的空隙 是因为 代码中 两个DIV之前有个 ’回车‘ 这么写就OK了 可是为什么会有这种问题呢,是因为浏览器将 空格.回车.tab键等字符都当做一个空格处理,所以当你回车 ...
- 两个div之间的蜜汁间隙
两个div左右相邻,想让他们紧挨在一起 加了margin:0:padding:0: 不知道为什么还是会有间隙. 然后在两个div的父元素加了:font-size:0: 就终于挨在一起惹.
- 关于两个DIV之间的空白字符
首先!!!!这个问题应该是去面试前端会经常问到的问题!!! 如,下面这个例子: <!DOCTYPE html> <html lang="zh-CN"> &l ...
- 请问两个div之间的上下距离怎么设置
转自:https://zhidao.baidu.com/question/344630087.html 楼上说的是一种方法,yanzilisan183 <div style="marg ...
- 设置两个div是总是不能重合,浏览器user agent stylesheet问题
如图 两个div之间总是有一个空行,设置了margin为0还是没卵用,f12调试发现 多了一个user agent stylesheet样式,经百度是浏览器自带的样式 重新为div内的元素ul设置cs ...
- 让上下两个DIV块之间有一定距离或没有距离
1.若想上下DIV块之间距离,只需设定:在CSS里设置DIV标签各属性参数为0div{margin:0;border:0;padding:0;}这里就设置了DIV标签CSS属性相当于初始化了DIV标签 ...
随机推荐
- “全栈2019”113篇Java基础学习资料及总结
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- JAVA日期——java.util.date类的操作
package com.hxzy.time; import java.text.SimpleDateFormat;import java.util.Date; public class DateDem ...
- LOJ#3083. 「GXOI / GZOI2019」与或和（单调栈）
题面 传送门 题解 按位考虑贡献,如果\(mp[i][j]\)这一位为\(1\)就设为\(1\)否则设为\(0\),对\(or\)的贡献就是全为\(1\)的子矩阵个数,对\(and\)的贡献就是总矩阵 ...
- flask后端获取前端post/get数据
post:用request.form 而且要加上return !!记着加上return get:用 request.args()就可以了
- 读取Properties文件的六种方法
1.使用java.util.Properties类的load()方法 示例: InputStream in = new BufferedInputStream(new FileInputStream( ...
- python 之 比较哪个数据大小
#定义一个字典info={}#定义比较的人数n=int(input("请输入你要比较的人数"))#循环while(n): #输入a,b 两个数据 ,分别代表学号 和分数 # 把输入 ...
- python 爬虫入门之爬小说
##第一步 导包from bs4 import BeautifulSoupimport requestsimport sys ##准备class downloder(object): def __in ...
- leetcode-6-Z字形变换
题目描述: 将字符串 "PAYPALISHIRING" 以Z字形排列成给定的行数: P A H N A P L S I I G Y I R 之后从左往右,逐行读取字符:" ...
- C#-WebForm-AJAX阿贾克斯（二）★★★★★ajax的完整结构★★★★★
ajax完整结构: $.ajax({ url:"",//服务器路径 data:{},//给服务端传递的参数,可以没有,也可以是多个 type:"post", / ...
- TortoiseGit-2.0.0.0-64bit问题
使用TortoiseGit拉取一个项目时,提示: disconnected no supported authentication methods available(server sent: pub ...