文档章节

javascript对dom节点拖拽的简单实现(drag特性)

lonelydawn
 lonelydawn
发布于 2016/12/01 01:18
字数 335
阅读 154
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

直接看代码 ,一切尽在注释中

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Drag</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding:0px;
		}
		#con{
			width:100%;
			height:500px;
			border:1px dotted #999;
		}
		#img{
			margin-left: 10px;
			margin-top: 0px;
		}
	</style>
	<script type="text/javascript">
		//保存位置的状态值
		var pos={
			parent_top:0,
			parent_left:0,
			cur_top:0,
			cur_left:0
		}

		function allowDrop(ev){				//ev是事件对象
			ev.preventDefault();			//取消事件已经关联的默认活动
		}

		function drag(ev){
			//dataTransfer是一个媒介,将目标对象放入媒介
			//dataTransfer对象用来保存被拖动的数据,仅在拖动事件有效
			//这里将被拖动元素的id保存为名为Text的键值对中
			ev.dataTransfer.setData("Text",ev.target.id);

			//获取被拖动对象相对于上层元素顶边和左边位置	
			pos.parent_top=ev.target.offsetTop;
			pos.parent_left=ev.target.offsetLeft;
			pos.cur_top=ev.screenY;
			pos.cur_left=ev.screenX;
		}

		function drop(ev){
			var new_top,new_left;
			ev.preventDefault();
//			alert(2);
			var data=ev.dataTransfer.getData("Text");		//从媒介中获取目标对象
			var elem=document.getElementById(data);

			//这里不能这样使用,因为offset*的值是只读的,不能改变
//			elem.offsetLeft=v.parent_left+ev.screenX-v.cur_left+"px";	
//			elem.offsetTop=v.parent_top+ev.screenY-v.cur_top+"px";


			elem.style.marginLeft=pos.parent_left+ev.screenX-pos.cur_left+"px";
			elem.style.marginTop=pos.parent_top+ev.screenY-pos.cur_top+"px";
		}
	</script>
</head>

<body>
 	<div id="con" ondragover="allowDrop(event);" ondrop="drop(event);">
		<img id="img" src="img/index.jpg" draggable="true" ondragstart="drag(event)"/>
	</div>
<!-- 	<div width="100px;" height="200px;" style="border:1px solid #aaa;height:100px;" onclick="showPosition(event);">
		<strong>helloworld</strong>
	</div> -->
	<!-- <img id="img" src="img/index.jpg"/> -->
</body>
</html>

 

新位置查找原理(加减运算)

 

运行结果(不好意思,只有图)

 

 

下一篇: DFS
lonelydawn
粉丝 44
博文 50
码字总数 52905
作品 0
闵行
前端工程师
私信 提问
加载中
请先登录后再评论。
Netty那点事(三)Channel与Pipeline

Channel是理解和使用Netty的核心。Channel的涉及内容较多,这里我使用由浅入深的介绍方法。在这篇文章中,我们主要介绍Channel部分中Pipeline实现机制。为了避免枯燥,借用一下《盗梦空间》的...

黄亿华
2013/11/24
2W
22
访问安全控制解决方案

本文是《轻量级 Java Web 框架架构设计》的系列博文。 今天想和大家简单的分享一下,在 Smart 中是如何做到访问安全控制的。也就是说,当没有登录或 Session 过期时所做的操作,会自动退回到...

黄勇
2013/11/03
3.6K
8
用vertx实现高吞吐量的站点计数器

工具:vertx,redis,mongodb,log4j 源代码地址:https://github.com/jianglibo/visitrank 先看架构图: 如果你不熟悉vertx,请先google一下。我这里将vertx当作一个容器,上面所有的圆圈要...

jianglibo
2014/04/03
4.3K
3
SQLServer实现split分割字符串到列

网上已有人实现sqlserver的split函数可将字符串分割成行,但是我们习惯了split返回数组或者列表,因此这里对其做一些改动,最终实现也许不尽如意,但是也能解决一些问题。 先贴上某大牛写的s...

cwalet
2014/05/21
9.7K
0
程序猿媛一:Android滑动翻页+区域点击事件

滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。文尾附注源码获取途径。 转载请保留原文出处“http://my.oschina.net/gluoyer...

花佟林雨月
2013/11/09
4.3K
1

没有更多内容

加载失败,请刷新页面

加载更多

红队之windows用户和组

目录 0x01 用户账户和组策略 0x02 Windows中的访问控制 0x03 安全标识符SID 0x04 用户账户控制(UAC) 用户帐户 用户帐户是对计算机用户身份的标识,本地用户帐户、密码存在本地计算机上,只...

黑白天安全团队
昨天
9
0
厉害了!百度智能云NIRO Pro智能机器人半年内连获三项产品设计大奖

短短半年内,百度智能云NIRO Pro智能机器人连获三项产品设计大奖,其中包括有“设计界奥斯卡”之称的德国红点奖,成功引领了全球助理机器人的工业设计和发展趋势风向标。红点奖评委这样评价,...

百度智能云
2019/12/04
0
0
StringBuider 在什么条件下、如何使用效率更高?

作者:后青春期的Keats cnblogs.com/keatsCoder/p/13212289.html 引言 都说 StringBuilder 在处理字符串拼接上效率要强于 String,但有时候我们的理解可能会存在一定的偏差。最近我在测试数据...

Object_Man
今天
11
0
发布更新|腾讯云 Serverless 产品动态 20200813

一、云函数 SCF + Ckafka 联合转储方案正式发布 发布时间: 2020-08-06 产品背景: SCF + Ckafka 联合转储方案可以帮忙用户节省使用与开发成本,用户可以将 Ckafka 消息转储同步转储至消息队...

腾讯云Serverless
39分钟前
5
0
如何正确强制执行Git推送? - How do I properly force a Git push?

问题: I've set up a remote non-bare "main" repo and cloned it to my computer. 我已经建立了一个远程的非裸露的“主”仓库,并将其克隆到我的计算机上。 I made some local changes, u......

javail
40分钟前
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部