纯js拖拽参考
function myDrag(obj){
obj.onmousedown=function(e){
var e=e||window.event;
var diffX=e.clientX-this.offsetLeft;
var diffY=e.clientY-this.offsetTop;
document.onmousemove=function(e){
var e=e||window.event;
var left=e.clientX-diffX;
var top=e.clientY-diffY;
var leftMax=document.documentElement.clientWidth-obj.offsetWidth;
var topMax=document.documentElement.clientHeight-obj.offsetHeight;
if(left<0){
left=0;
}else if(left>leftMax){
left=leftMax;
}
if(top<-20){
top=-20;
}else if(top>topMax){
top=topMax;
}
obj.style.left=left+"px";
obj.style.top=top+"px";
}
document.onmouseup=function(){
document.onmousemove=null;
}
}
}
纯js拖拽参考的更多相关文章
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- 关于 JS 拖拽功能的冲突问题及解决方法
前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文 ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js拖拽分析
js拖拽分析 思路 1.三个鼠标事件,mousedown,mousemove,mouseup 2.可移动性absolute 3.边界限制 得到鼠标点击处和div边界的距离,然后得出top 和 left ...
- JS拖拽div(移动)
<!doctype html><html><head> <meta charset="utf-8"> <title>JS ...
- 浅谈js拖拽
本文来自网易云社区 作者:刘凌阳 前言 本文依据半年前本人的分享<浅谈js拖拽>撰写,算是一篇迟到的文章. 基本思路 虽然现在关于拖拽的组件库到处都是,HTML5也把拖放纳入了标准.但考虑 ...
- 一步一步实现JS拖拽插件
js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠 ...
- 原生js拖拽、jQuery拖拽、vue自定义指令拖拽
原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
随机推荐
- 立体匹配:关于OpenCV读写middlebury网站的给定的视差并恢复三维场景的代码
Middlebury是每个研究立体匹配算法的人不可能不使用的网站,Middlebury提供了许多标准的测试库,这极大地推进了立体匹配算法的进展.Middlebury提供的标准库,其计算出的视差保存在后 ...
- [原]iptables的NAT策略
#*nat #:PREROUTING ACCEPT [:] #:POSTROUTING ACCEPT [:] #:OUTPUT ACCEPT [:] # #-A PREROUTING –s IP1 - ...
- (转)log4net的配置详解
原文地址:http://blog.csdn.net/pfe_nova/article/details/12225349 log4net是一款优秀的第三方日志框架,可以很容易的加载到开发项目中(引用lo ...
- oracle rac 日志体系结构!
告警日志集群节点集群件告警日志:$GRID_HOME/log/<hostname>/alert<hostname>.log数据库实例的告警日志:$DIAG_DESTINATIO ...
- OC基础(20)
Protocol基本概念 Protocol注意事项 Protocol类型限制 代理设计模式 *:first-child { margin-top: 0 !important; } body > ...
- [AFUI]App Framework
---------------------------------------------------------------------------------------------------- ...
- win8或win8.1修改注册表失败的原因
win8 and win8.1 modify the registry need compiled to be different versions according to the os bits.
- eclipse 弹出智能提示、代码自动换行
在eclipse 中编写java 程序时,为了快速查找变量或搜索方法调用,在智能窗口的帮助下,程序的编写速度会更快,但eclipse 默认下并不弹出智能窗口,这就需要自己进行配置,设置的步骤如下: 打 ...
- Eclipse 启动Tomcat后web项目的classes的子文件夹中没有calss文件
Eclipse 启动Tomcat后web项目的classes的子文件夹中没有calss文件. 经网上查得以下方法可解决 把properties属性里的java compiler-->buildi ...
- 洛谷P1113 杂物
P1113 杂务 251通过 441提交 题目提供者该用户不存在 标签图论递推 难度普及/提高- 提交该题 讨论 题解 记录 最新讨论 为什么会只有10分? 题目描述 John的农场在给奶牛挤奶前有很 ...