h5-17-元素拖放
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1 {
width: 400px;
height: 200px;
border: 1px solid red;
margin-bottom: 20px;
} #div2 {
width: 400px;
height: 200px;
border: 1px solid blue;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="div1" ondragover="dragover(event);" ondrop="drop(event);"></div>
<div id="div2" ondragover="dragover(event);" ondrop="drop(event);"></div> <img id="img1" src="img/user7.jpg" draggable="true" ondragstart="dragstart(event)"/>
<img id="img2" src="img/user10.jpg" draggable="true" ondragstart="dragstart(event)"/> <script>
/*当开始拖动元素*/
function dragstart(e) {
console.log(e.target.id + '拖动开始');
//在事件对象中存储被拖动元素的id
e.dataTransfer.setData('objId',e.target.id);
} /*当元素被拖动到当前元素中*/
function dragover(e) {
console.log(e.target.id + '：dragover');
//阻止默认行为（，默认行为就是不让鼠标释放元素到这里）
e.preventDefault();
} /*当元素被释放到当前元素中事件*/
function drop(e) {
console.log(e.target.id + '：drop');
//阻止默认行为
e.preventDefault();
//获得当前被拖动元素的id
var id = e.dataTransfer.getData('objId');
//获得被拖动元素的对象
var obj = document.getElementById(id);
//在当前元素中插入被拖动元素
if (e.target.nodeName == 'DIV')
e.target.appendChild(obj);
}
</script>
</body>
</html>
h5-17-元素拖放的更多相关文章
- HTML5 元素拖放
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Selenium常用操作汇总二——如何把一个元素拖放到另一个元素里面(转)
Q群里有时候会有人问,selenium webdriver怎么实现把一个元素拖放到另一个元素里面.这一节总一下元素的拖放. 下面这个页面是一个演示拖放元素的页面,你可以把左右页面中的条目拖放到右边的 ...
- html5实现本页面元素拖放和本地文件拖放
HTML5拖放 拖放本地数据 1.HTML拖放 拖放(Drag 和 Drop)是HTML5标准的组成部分 2.拖放开始: ondragStart:调用了一个函数,drag(event),它规定了被 ...
- html5如何实现元素拖放
html5如何实现元素拖放 一.总结 一句话总结:参考文档里面有各种想象不到的好东西.一边允许拖放,一边接收拖放,一边传递数据,一边接收数据.拖放过程还要防止拖放以默认方式(链接)打开. 1.html ...
- Appium Inspector定位Webview/H5页面元素
目录 操作步骤 Python操作该混合App代码 Appium在操作混合App或Android App的H5页面时, 常常需要定位H5页面中的元素, 传统方式是 翻墙 + 使用Chrome://ins ...
- selenium webdriver学习（十）------------如何把一个元素拖放到另一个元素里面(转)
selenium webdriver学习(十)------------如何把一个元素拖放到另一个元素里面 博客分类: Selenium-webdriver 元素拖放drag and drop Q群里 ...
- 03.Web大前端时代之：HTML5+CSS3入门系列~H5功能元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...
- h5交互元素details标签
details是h5新增的交互元素,details与 summary 标签配合使用可以为 details 定义标题.默认情况下,不显示 details 标记中的内容.当用户点击标题时,会显示出 det ...
- Chrome调试模式获取App混合应用H5界面元素
原文章地址http://blog.csdn.net/qq_19636353/article/details/53731254 浏览器的远程调试工具,使得我们可以通过PC上开启的控制台,调试手机浏览器中 ...
- HTML5元素拖放设置总结
将元素图片放入div盒子内 1.首先设置元素为可拖放:在img标签内加入draggable=”true”. <img draggable="true"> 2.设置元素的 ...
随机推荐
- HDU 4085 Peach Blossom Spring 斯坦纳树 状态压缩DP+SPFA
状态压缩dp+spfa解斯坦纳树 枚举子树的形态 dp[i][j] = min(dp[i][j], dp[i][k]+dp[i][l]) 当中k和l是对j的一个划分 依照边进行松弛 dp[i][j] ...
- https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2
https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2
- react native 之页面布局
第一章 flexbox 布局 1.flexDirection:'row', 水平 flexDirection:'column',垂直 需要在父元素上设置这种属性才能实现flex. flex:1 会撑 ...
- SDUT 3033 这题实在不知道起啥名好了（思维巧法）
这题实在不知道起啥名好了 Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 懒得想背景故事了,开门见山. 有一个长度为n的整数数列A ...
- js实现网页多少秒后自动跳转到指定网址
在网上搜了一下,关于这个技术处理有多种方法,我只记下我在视频里学到的三种: 1.用一个response.sendRedirect("目标页面.jsp\.htm");实现直接跳转: ...
- POJ - 2115 C Looooops（扩展欧几里德求解模线性方程（线性同余方程））
d.对于这个循环, for (variable = A; variable != B; variable += C) statement; 给出A,B,C,求在k位存储系统下的循环次数. 例如k=4时 ...
- codeforces 691C C. Exponential notation(科学计数法)
题目链接: C. Exponential notation time limit per test 2 seconds memory limit per test 256 megabytes inpu ...
- Linux下使用pip安装keras
Keras是一个底层使用Theano或TensorFlow的深度学习框架,它的设计参考了Torch,用Python语言编写,也很方便使用Python调用,是一个高度模块化的神经网络库,支持使用GPU和 ...
- 15个你不可不知的cmd命令
cmd和dos: dos是Disk Operating System 磁盘操作系统的缩写,它是个人计算机上的一类操作系统.跟Windows图像界面操作系统不同的是,dos是一种面向磁盘的操作系统,并且 ...
- 特殊的shell变量:
特殊的shell变量: $0 获取当前执行的shell脚本的文件名 $n 获取当前执行的shell脚本的第n个参数值,n=1..9 $* 获取当前shell的所有参数 “$1 $2 $3 …注意与$# ...