纯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 ...
随机推荐
- spring mvc中的json整合
spring mvc整合过程中是有版本兼容的问题.具体的哪个版本的springmvc和哪个个版本的json包冲突我也无从考证了.我用的springmvc版本是3.2.1jaskson的版本是 1.1. ...
- Python 之字节转换
# coding: utf-8 def bytes2human(n): """ >>> bytes2human(10000) 9K >>&g ...
- Dubbo 源码安装与编译
源码地址: https://github.com/alibaba/dubbo 需要提前准备好 Maven 环境, 相关准备方法请看: http://www.cnblogs.com/ghj1976/p ...
- nyoj 93 汉诺塔(三)
点击打开链接 汉诺塔(三) 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 在印度,有这么一个古老的传说:在世界中心贝拿勒斯(在印度北部)的圣庙里,一块黄铜板上插着三根宝 ...
- 【转】windows和linux间共享互传文件
原文:http://blog.guorunmin.cn/2015/09/16/windows%E5%92%8Clinux%E9%97%B4%E5%85%B1%E4%BA%AB%E4%BA%92%E4% ...
- (转)c#多线程 Invoke方法的使用
原文地址:http://www.cnblogs.com/lovko/archive/2008/12/19/1358748.html 在多线程编程中,我们经常要在工作线程中去更新界面显示,而在多线程中直 ...
- LPC1788 SDRAM运行程序
折腾了很久 终于解决了 从SDRAM中运行APP程序. 说明:LPC1788 本身有512K的flash和96K的RAM.支持TFT和SDRAM 这算是跟别家cortex-M3架构MCU相比较的一个亮 ...
- VML/SVG在Web开发中一些常见的框架
1.借鉴自: http://www.codefans.net/soft/3061.shtml 来源于网上. flowchart.js http://adrai.github.io/flowchart ...
- SparkSQL使用之Thrift JDBC server
Thrift JDBC Server描述 Thrift JDBC Server使用的是HIVE0.12的HiveServer2实现.能够使用Spark或者hive0.12版本的beeline脚本与JD ...
- jmeter随笔(5)--断言中正则表达式的特殊字符问题和中文乱码显示问号的问题
最近在工作中,对jmeter实践的点滴的记录,这里分享交流,不一定正确,仅供参考和讨论,有想法的欢迎留言.谈论,手机上图片如果不清晰,请点击[阅读原文]查看. 问题:今天QQ群一朋友遇到jmeter的 ...