<!DOCTYPE html>

<html lang="en">

	<head>

		<meta charset="UTF-8" />

		<title>拖拽js</title>

		<style type="text/css">

			html,

			body {

				overflow: hidden;

			}

			body,

			div,

			{

				margin: 0;

				padding: 0;

			}

			body {

				color: #fff;

				font: 12px/2 Arial;

			}

			p {

				padding: 0 10px;

				margin-top: 10px;

			}

			span {

				color: #ff0;

				padding-left: 5px;

			}

			#box {

				position: absolute;

				width: 300px;

				height: 150px;

				background: #D5CDDA;

				border: 2px solid #ccc;

				top: 150px;

				left: 400px;

				margin: 0;

			}

			#drag {

				height: 25px;

				cursor: move;

				background: #724a88;

				border-bottom: 2px solid #ccc;

				padding: 0 10px;

			}

		</style>

	</head>

	<body>

		<div id="box">

			<div id="drag">拖动区域</div>

			被拖动的整个div

		</div>

	</body>

</html>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">

	$(function() {

			moveBox($("#box"), $("#drag"));

		})

		//B被拖动的div，BT可拖动区域

	function moveBox(B, BT) {

		var bDrag = false;

		var _x, _y;

		BT.mousedown(function(event) {

			var e = event || window.event;

			bDrag = true;

			_x = e.pageX - B.position().left;

			_y = e.pageY - B.position().top;

			return false

		})

		$(document).mousemove(function(event) {

			if(!bDrag) return false;

			var e = event || window.event;

			var x = e.pageX - _x;

			var y = e.pageY - _y;

			console.log(B.position());

			var maxL = $(document).width() - B.outerWidth();

			var maxT = $(document).height() - B.outerHeight();

			x = x < 0 ? 0 : x;

			x = x > maxL ? maxL : x;

			y = y < 0 ? 0 : y;

			y = y > maxT ? maxT : y;

			B.css({

				left: x,

				top: y

			});

			return false

		}).mouseup(function() {

			bDrag = false;

			return false

		})

	}

</script>

　　

最好的拖拽js的更多相关文章

  1. 拖拽js

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 拖拽js和jq写法

    第一种原生js写法 window.onload=function () { var oDrag=document.getElementById('drag'); oDrag.onmousedown=f ...

  3. 原生拖拽js利用localstorage保存位置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. html5 Sortable.js 拖拽排序源码分析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的.   本帖属于原创,转载请出名出处. 官网http:// ...

  5. jquery实现div拖拽

    1.引入jquery1.8.3 ,模块拖拽js代码: //模块拖拽 $(function(){ var _move=false;//移动标记 var _x,_y;//鼠标离控件左上角的相对位置 $(& ...

  6. Dropzone.js实现文件拖拽上传

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...

  7. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  8. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  9. js实现可拖拽的div

    前言 下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现. 学习 ...

随机推荐

  1. 用selenium 模块控制浏览器

    11.8 用selenium 模块控制浏览器selenium 模块让Python 直接控制浏览器,实际点击链接,填写登录信息,几乎就像是有一个人类用户在与页面交互.与Requests 和Beautif ...

  2. C高级 框架开发中红黑树结构

    引言  -- 红黑树历史 红黑树是数据结构学习中一道卡. 底层库容器中必不可少的算法. 历经各种实战运用,性能有保障. 同样红黑树不好理解, 就算理解了, 代码也不好写. 就算写了, 工程库也难构建. ...

  3. Python爬虫之百度API调用

    调用百度API获取经纬度信息. import requests import json address = input('请输入地点:') par = {'address': address, 'ke ...

  4. mongodb循环

     var rds = db.REGIPATIENTREC.find({mzh:{$lt:"0"},usrOrg:"石景山中西医结合医院"}); var show ...

  5. 八：Zookeeper开源客户端Curator的api测试

    curator是Netflix公司开源的一套ZooKeeper客户端,Curator解决了很多ZooKeeper客户端非常底层的细节开发工作.包括连接重连,反复注册Watcher等.实现了Fluent ...

  6. Pow(x, n)——这也能用二分法！！！！

    Implement pow(x, n). 下面介绍一下解决该问题的几种方法以及要注意的地方: 1)最直观容易想到的方法就是用递归方法求n个x的乘积,注意考虑n的正负号,时间复杂度为O(n) class ...

  7. GT-----如何做Android应用流量测试？

    1.如何判断一个应用的流量偏高? 如果看流量的绝对值看不出高低,那就找几个同类型的产品对比一下,如果完成同样的事物,被测应用比同类产品高很多,那就偏高了,可能有优化的空间. 2.如何找到有效的优化点? ...

  8. 360杀毒导致的 VS 报扩展错误，请查看 ActiveLog.xml

    360杀毒将 TypeScript的 tsserver.js 列为木马,结果导致VS2017启动时,总是报错,将其加为信任即可解决.

  9. 前端读者 | 前端用户体验-UI动效设计

    本文来自互联网 @羯瑞 整理 UI动效现如今在 APP 和网页中几乎已经成为了基本的组成部分,经过仔细打磨的 UI动效对于整个界面的提升是显著的. 动效呈现出状态切换的过程,展现了元素之间的逻辑关系, ...

  10. nginx实现正向代理和反向代理

    注意:nginx正向代理有缺陷,如果同时实现http和https正向代理请使用squid软件 (1)正反向代理 正向代理:实现客户端上网 反向代理:代理访问后端web服务器, 区别:正向代理的对象是客 ...