js插件-简单拖拽
前端开发的时候，有好多地方用到拖拽效果,当然 http://jqueryui.com/draggable/ 是个不错的选择,but 我是个打破砂锅问到底的人，抽点时间用js小小的实现了类似的插件，话不多说。
- first: html和css
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
} #div1 {
position: absolute;
width: 100px;
height: 100px;
cursor: move;
background-color: red;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
- now,先把主要算法实现一下：
<script>
window.onload = function () {
//获取需要拖拽的div
var div1 = document.getElementById("div1");
//添加鼠标按下事件
div1.onmousedown = function (evt) {
var oEvent = evt || event;
//获取按下鼠标到div left top的距离
var distanceX = oEvent.clientX - div1.offsetLeft;
var distanceY = oEvent.clientX - div1.offsetTop;
//添加doc滑动时间
document.onmousemove = function (evt) {
var oEvent = evt || event;
//重新计算div的left top值
var left = oEvent.clientX - distanceX;
var top = oEvent.clientY - distanceY; //left 当小于等于零时，设置为零 防止div拖出document之外
if (left <= 0) {
left = 0;
}
//当left 超过文档右边界 设置为右边界
else if (left >= document.documentElement.clientWidth - div1.offsetWidth) {
left = document.documentElement.clientWidth - div1.offsetWidth;
}
if (top <= 0) {
top = 0;
}
else if (top >= document.documentElement.clientHeight - div1.offsetHeight) {
top = document.documentElement.clientHeight - div1.offsetHeight;
} //重新给div赋值
div1.style.top = top + "px";
div1.style.left = left + "px";
}
//添加鼠标抬起事件
div1.onmouseup = function () {
//清空事件
document.onmousemove = null;
div1.onmouseup = null;
}
}
} </script> - yeah,使用面向对象实现一下
<style>
* {
margin:0;
padding:0;
}
#div1 {
width: 100px;
height: 100px;
background-color: red;
}
#div2 {
background-color:yellow;
width:100px;
height:100px;
}
</style> <div id="div1"></div>
<div id="div2"></div>js Draggle class:
function Drag(id) {
this.div = document.getElementById(id);
if (this.div) {
this.div.style.cursor = "move";
this.div.style.position = "absolute";
} this.disX = 0;
this.disY = 0;
var _this = this; this.div.onmousedown = function (evt) {
_this.getDistance(evt); document.onmousemove = function (evt) {
_this.setPosition(evt);
} _this.div.onmouseup = function () {
_this.clearEvent();
}
}
} Drag.prototype.getDistance = function (evt) {
var oEvent = evt || event;
this.disX = oEvent.clientX - this.div.offsetLeft;
this.disY = oEvent.clientY - this.div.offsetTop;
} Drag.prototype.setPosition = function (evt) {
var oEvent = evt || event;
var l = oEvent.clientX - this.disX;
var t = oEvent.clientY - this.disY;
if (l <= 0) {
l = 0;
}
else if (l >= document.documentElement.clientWidth - this.div.offsetWidth) {
l = document.documentElement.clientWidth - this.div.offsetWidth;
}
if (t <= 0) {
t = 0;
}
else if (t >= document.documentElement.clientHeight - this.div.offsetHeight) {
t = document.documentElement.clientHeight - this.div.offsetHeight;
}
this.div.style.left = l + "px";
this.div.style.top = t + "px";
} Drag.prototype.clearEvent = function () {
this.div.onmouseup = null;
document.onmousemove = null;
}at last：最终实现：
window.onload = function () {
new Drag("div1");
new Drag("div2");
}效果如下:
入园子已经三载有余，平时也爱在各位经营的园子溜达汲取知识。之前也有过想开一个自己的园子，但总因为这样那样的事情把这事遗忘了。最近发现身边的@考拉熊http://home.cnblogs.com/u/rccc/好早已经有了这个习惯。人啊，怎么说呢，总是向比自己强的人看起！加油 ，u can @o(∩_∩)o 哈哈
js插件-简单拖拽的更多相关文章
- 好玩的原生js的简单拖拽
这个拖拽的图片不是唯一的,拿到代码自己添加一张照片就可以啦 <!DOCTYPE html><html> <head> <meta charset=" ...
- js实现简单拖拽效果
方法如下: var params = { left: 0, top: 0, currentX: 0, currentY: 0, flag: false }; var getCss = function ...
- php和js实现文件拖拽上传
Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...
- JS Event 鼠标拖拽事件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- 移动端多个DIV简单拖拽功能
移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en" ...
- jquery插件-自由拖拽
最近工作不是很忙,学习之余想整理一些代码出来,首先想到的就是是js拖拽. 两年前去某公司面试的时候,曾经被问过这个问题,如何在页面上拖放元素,尽管现在看起来很简单,但当时的我半点思路都没有,面试想当然 ...
- Dropzone.js实现文件拖拽上传
dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...
- jQuery插件（拖拽）
拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). ...
- 纯JS实现可拖拽表单
转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mouse ...
随机推荐
- 目前在玩的几款手机挖矿APP
目前在玩的几款手机挖矿APP 1.网易星球 网易星球app是由网易最新推出的区块链产品,网易星球app用户获得邀请码注册之后就能免费领取数字资产“黑钻”,网易星球app还支持信息安全存储.去中心化价值 ...
- 【CF1257A】Two Rival Students【思维】
题意:给你n个人和两个尖子生a,b,你可以操作k次,每次操作交换相邻两个人的位置,求问操作k次以内使得ab两人距离最远是多少 题解:贪心尽可能的将两人往两边移动,总结一下就是min(n-1,|a-b| ...
- 【HDU6662】Acesrc and Travel【树形DP】
题目大意:给你一棵树,每个节点有一个权值,Alice和Bob进行博弈,起点由Alice确定,确定后交替选择下一个点,Alice目标是最终值尽可能大,Bob目标是尽可能小 题解:很明显是树形DP,那么考 ...
- BZOJ 2547: [Ctsc2002]玩具兵(二分答案+二分图匹配)
传送门 解题思路 可以发现天兵不用管,答案的一个上界是\(2*k\),就是天兵一个个换.刚开始写了个拆\(6\)点的网络流,调了半天发现自己假了..说说正解,首先可以发现交换士兵其实就是种类的交换,那 ...
- [CSP-S模拟测试]:旅行（数学+线段树）
题目传送门(内部题12) 输入格式 第一行,一个整数$n$,代表树的点数.第二行,$n$个整数,第$i$个整数是$B_i$,描述排列$B$.接下来$n−1$行,每行两个整数$u,v$,描述一条树边$( ...
- maven创建的quickstart项目生成可执行jar
maven创建的quickstart项目在打包成jar后,通过Java -jar 文件名.jar 会提示没有主清单属性. 为了生成可执行的jar,需要添加maven插件 maven-shade-plu ...
- MySQL的limit分页性能测试加优化
日常我们分页时会用到MySQL的limit字段去处理,那么使用limit时,有什么需要优化的地方吗?我们来做一个试验来看看limit的效率问题:环境:CentOS 6 & MySQL 5.71 ...
- 术语-Portal：Portal（Web站点）
ylbtech-术语-Portal:Portal(Web站点) Portal作为网关服务于因特网的一种WEB站点.Portal是链路.内容和为用户可能找到的感兴趣的信息(如新闻.天气.娱乐.商业站点. ...
- Jmeter断言中判断请求失败的响应代码问题
很多http请求会返回400.404.500.502等错误,我们在断言中一般会直接去勾选响应代码,然后匹配得到的响应代码,但是总是失败.百思不得其解! 后来查询Jmeter官方帮助时,在里面找到了答案 ...
- c++全局变量，局部变量，内存布局，默认初始化
全局变量 定义在所有函数之外的变量,main函数之内的变量也是局部变量,Globle variable 未显示初始化时执行默认初始化 局部变量 定义在函数之内的变量,Local variable 未 ...