文档章节

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

lonelydawn
 lonelydawn
发布于 2016/12/01 01:18
字数 335
阅读 19
收藏 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
粉丝 41
博文 50
码字总数 52905
作品 0
闵行
前端工程师
私信 提问
Github Repository 可视化 (D3.js & Three.js)

Github Repository 可视化 (D3.js & Three.js) 先上 Demo 链接 & 效果图demo 链接github 链接 效果图 2D: 效果图 3D: 为什么要做这样一个网站? 最初想法是因为 github 提供的页面无法一次看到...

ssthouse_hust
10/17
0
3
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

没有更多内容

加载失败,请刷新页面

加载更多

docker部署springboot项目

安装docker 菜鸟教程 springboot项目 maven依赖 <?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001......

yimingkeji
今天
10
0
ios多个target

1.建立3个target,分别为heroone,heroone test,heroone dev;分别为正式环境,test环境,dev环境 2.注意取消掉autocreate以防止名字不对,分别以Duplicate的方式建立另外两个scheme 3.创建...

HeroHY
今天
5
0
php获取客户端IP

php获取客户端IP 首先先阅读关于IP真实性安全的文章:如何正確的取得使用者 IP? 「任何從客戶端取得的資料都是不可信任的!」 HTTP_CLIENT_IP头是有的,但未成标准,不一定服务器都实现。 ...

DrChenXX
昨天
0
0
. The valid characters are defined in RFC 7230 and RFC 问题

通过这里的回答,我们可以知道: Tomcat在 7.0.73, 8.0.39, 8.5.7 版本后,添加了对于http头的验证。 具体来说,就是添加了些规则去限制HTTP头的规范性 参考这里 具体来说: org.apache.tom...

west_coast
昨天
1
0
刷leetcode第704题-二分查找

今天双十一买的算法书到货了,路上刷到有人说的这个题,借(chao)鉴(xi)一下别人的思路,这个是C++标准库里面的经典方法,思路精巧,优雅好品味 int search(int* nums, int numsSize, in...

锟斤拷烫烫烫
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部