纯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 ...
随机推荐
- 9. Palindrome Number
/* Determine whether an integer is a palindrome. Do this without extra space. click to show spoilers ...
- HDU 2066 一个人的旅行(单源最短路SPFA)
Description 虽然草儿是个路痴(就是在杭电待了一年多,居然还会在校园里迷路的人,汗~),但是草儿仍然很喜欢旅行,因为在旅途中 会遇见很多人(白马王子,^0^),很多事,还能丰富自己的阅历,还 ...
- SQLSERVER的兼容级别
今天采用SQL Mannager 2008连接远程的sqlserver数据库,之后弹出一个对话框,修改SQL兼容级别,当时每太注意,一下点击了确定按钮,结果导致两个系统SQL只想全部出错,幸亏发现的早 ...
- Hibernate高级查询QBC条件设置——Restrictions用法 引自:http://www.cnblogs.com/evon168/archive/2010/10/29/1863059.html
方法说明 方法 说明 Restrictions.eq = Restrictions.allEq 利用Map来进行多个等于的限制 Restrictions.gt > Restrictions.ge ...
- android 操作sqlite的一点小技巧
1.android 在sqlite插入数据时,是非常耗时的操作,原因是sqlite缺省会为每个插入操作开启一个事务,当数量变多的时候,自然时间就变得很慢,这时候可以考虑在插入等操作时先开启一个事务,再 ...
- 【Robot Framework】robot framework 学习以及selenium、appnium、requests实践(三)
看了上一章的内容,想必较为简单的case也都会编写了吧,但是是不是觉得,如果能够实现用例参数化,是不是会节省很多劳动力,这节就来学下RF中的user keywords,会让你发现写用例原来可以这么简单 ...
- iOS7 iOS8 UITableviewCell处于编辑状态,dismiss或者back崩溃
今天在项目中遇到一个坑爹的 Crash , 在 iOS7 iOS8 UITableviewCell处于编辑状态,dismiss或者back崩溃 iOS9不会 原因:苹果的BUG代码 解决:在视图消失 ...
- 洛谷P2731 骑马修栅栏 Riding the Fences
P2731 骑马修栅栏 Riding the Fences• o 119通过o 468提交• 题目提供者该用户不存在• 标签USACO• 难度普及+/提高 提交 讨论 题解 最新讨论 • 数据有问题题 ...
- vc不用IDE编译方法
一个EXE是如何形成的 比如一个源程序有以下两个文件. 1.c 1.rc 首先cl.exe 会把源代码编译为1.obj rc.exe会把1.rc编译为1.res link.exe会把1.obj 1.r ...
- C#中messagebox用法
[函数] <整型> MessageBox(<字符串 Text, <字符串> Title, <整型> nType,MessageBoxIcon);[函数说明] ...