文档章节

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

lonelydawn
 lonelydawn
发布于 2016/12/01 01:18
字数 335
阅读 18
收藏 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>

 

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

 

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

 

 

© 著作权归作者所有

共有 人打赏支持
lonelydawn
粉丝 42
博文 50
码字总数 52905
作品 0
闵行
前端工程师
JQuery插件开发教程 | WhyJQuery

【前言】 jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件,经常有人询问一些技巧,因此干脆写这么一篇...

柒月-小妖精
2013/11/14
0
1
Cocos Creator 入门篇-拖拽小游戏(一)

前言 Cocos Creator的官方文档还是非常友好的,有中英文两个版本。 【强烈建议】 初学者先把官方文档看一遍。里面还包含了很多demo。 官方文档地址 :docs.cocos.com/creator/man…。 今天主...

nicomama_fe
08/31
0
0
基于HTML5的Drag and Drop生成图片Base64信息

HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag and Drop生成图片的Base64的...

xhload3d
2014/12/19
0
0
面向对象,更适合JavaScript

面向对象程序设计是软件开发中一个很庞大很复杂的话题,它并不是仅仅学会类、继承、封装、多态这些面向对象编程语法元素就表示掌握的,这些语法元素只是实现面向对象程序的工具, 就像砖块、...

陈宏鸿
05/07
0
0
AngularJS应用开发思维之1:声明式界面

这篇博客之前承接上一篇:http://www.cnblogs.com/xuema/p/4335180.html 重写示例:模板、指令和视图 AngularJS最显著的特点是用静态的HTML文档,就可以生成具有动态行为的页面。 还是前面的...

笔阁
2015/03/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

面向对象类之间的关系

面向对象类之间的关系:is-a、has-a、use-a is-a关系也叫继承或泛化,比如大雁和鸟类之间的关系就是继承。 has-a关系称为关联关系,例如企鹅在气候寒冷的地方生活,“企鹅”和“气候”就是关...

gackey
47分钟前
1
0
读书(附电子书)|小狗钱钱之白色的拉布拉多

关注公众号,在公众号中回复“小狗钱钱”可免费获得电子书。 一、背景 之前写了一篇文章 《小狗钱钱》 理财小白应该读的一本书,那时候我才看那本书,现在看了一大半了,发现这本书确实不错,...

tiankonguse
今天
1
0
Permissions 0777 for ‘***’ are too open

异常显示: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: UNPROTECTED PRIVATE KEY FILE! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ......

李玉长
今天
3
0
区块链10年了,还未落地,它失败了吗?

导读 几乎每个人,甚至是对通证持怀疑态度的人,都对区块链的技术有积极的看法,因为它有可能改变世界。然而,区块链技术问世已经10年了,我们仍然没有真正的用上区块链技术。 几乎每个人,甚...

问题终结者
今天
2
0
20180921 su与sudo命令、限制root用户通过ssh远程登录

su 命令 用户切换。 su # 切换到root用户su username # 切换到username用户# su 后面加-时,会初始化当前用户的各种环境su - username # 指定用户执行某些命令 su - -c "touch /tm...

野雪球
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部