文档章节

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

lonelydawn
 lonelydawn
发布于 2016/12/01 01:18
字数 335
阅读 17
收藏 0
点赞 0
评论 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
粉丝 41
博文 50
码字总数 52905
作品 0
闵行
前端工程师
面向对象,更适合JavaScript

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

陈宏鸿 ⋅ 05/07 ⋅ 0

深入了解React.js的JSX

JSX 是React 为JavaScript 语法带来的可选扩展,用于在JavaScript 代码中编写声明式XML 风格语法。 对于Web 项目而言,React 的JSX 提供了一组类似于HTML 的XML 标签,但在其他使用场景中,会...

紫霞等了至尊宝五百年 ⋅ 06/01 ⋅ 0

cxwithyxy/Axure_Js_Inject

AxureJsInject v1.0 可以在产品原型(RP)中加入你想要的js代码,这些js代码会用浏览器浏览产品原型的时候执行 支持 目前支持 Axure rp 8.1.0.3372 其他版本有待测试 开始 在元件库中导入 Ax...

陈轩大魔王 ⋅ 04/15 ⋅ 0

深入框架本源系列 —— Virtual Dom

该系列会逐步更新,完整的讲解目前主流框架中底层相通的技术,接下来的代码内容都会更新在 这里 为什么需要 Virtual Dom 众所周知,操作 DOM 是很耗费性能的一件事情,既然如此,我们可以考虑...

夕阳 ⋅ 06/02 ⋅ 0

JavaScript核心概念归纳整理

原文出处: 熊俊漉 JavaScript语言本身是一个庞大而复杂的知识体系,复杂程度不低于任何一门后端语言,本文针对JavaScript语言的核心概念进行简单的梳理,对应的每个知识点仅仅点到为止,不作...

音乐宇Code ⋅ 05/27 ⋅ 0

【Vue】源码分析--vdom与html的相互转换

简析 vdom是由js对象节点组成的一个树状结构,通过diff算法对比js对象节点来更新,最后映射到原生的dom中 一个简单的dom结构 对应到js对象节点就是 代码实现 index.html vNode.js Github htt...

ns2250225 ⋅ 03/13 ⋅ 0

DOM系列:浏览器与DOM 主标签

最近回过头来在学习JavaScript中的DOM知识,随着学习进度的向前推移,越发感觉DOM知识点较多。为了能更好的系统了解清楚DOM相关的知识,我打算重新将DOM的学习划入到DOM系列当中。那么今天将...

一个敲代码的前端妹子 ⋅ 05/28 ⋅ 0

Atom飞行手册翻译: 4.3 作用域设置、作用域和作用域描述符

作用域设置、作用域和作用域描述符 Atom支持语言特定的设置。你可以在Markdown文件中软换行,或者在Python中把tab的宽度设置为4。 语言特定的设置只是一些东西的子集,我们把它叫做“作用域设...

apachecn_飞龙 ⋅ 2015/08/07 ⋅ 0

前端性能优化:细说JavaScript的加载与执行

本文主要是从性能优化的角度来探讨JavaScript在加载与执行过程中的优化思路与实践方法,既是细说,文中在涉及原理性的地方,不免会多说几句,还望各位读者保持耐心,仔细理解,请相信,您的耐...

小白师兄 ⋅ 昨天 ⋅ 0

jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 1

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

创建新用户和授予MySQL中的权限教程

导读 MySQL是一个开源数据库管理软件,可帮助用户存储,组织和以后检索数据。 它有多种选项来授予特定用户在表和数据库中的细微的权限 - 本教程将简要介绍一些选项。 如何创建新用户 在MySQL...

问题终结者 ⋅ 昨天 ⋅ 0

android -------- 颜色的半透明效果配置

最近有朋友问我 Android 背景颜色的半透明效果配置,我网上看资料,总结了一下, 开发中也是常常遇到的,所以来写篇博客 常用的颜色值格式有: RGB ARGB RRGGBB AARRGGBB 这4种 透明度 透明度...

切切歆语 ⋅ 昨天 ⋅ 0

CentOS开机启动subversion

建立自启动脚本: vim /etc/init.d/subversion 输入如下内容: #!/bin/bash## subversion startup script for the server## chkconfig: 2345 90 10# description: start the subve......

随风而飘 ⋅ 昨天 ⋅ 0

Nginx + uwsgi @ubuntu

uwsgi 安装 sudo apt-get install python3-pip # 注意 ubuntu python3默认没有安装pippython3 -m pip install uwsgi 代码(test.py) def application(env, start_response): start_res......

袁祾 ⋅ 昨天 ⋅ 0

版本控制工具

CSV , SVN , GIT ,VSS

颖伙虫 ⋅ 昨天 ⋅ 0

【2018.06.19学习笔记】【linux高级知识 13.1-13.3】

13.1 设置更改root密码 13.2 连接mysql 13.3 mysql常用命令

lgsxp ⋅ 昨天 ⋅ 0

LVM

LVM: 硬盘划分分区成物理卷->物理卷组成卷组->卷组划分逻辑分区。 1.磁盘分区: fdisk /dev/sdb 划分几个主分区 输入t更改每个分区类型为8e(LVM) 使用partprobe生成分区的文件:如/dev/sd...

ZHENG-JY ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部