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拖拽参考的更多相关文章

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

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

  2. 关于 JS 拖拽功能的冲突问题及解决方法

    前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文 ...

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

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

  4. js拖拽效果

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

  5. js拖拽分析

    js拖拽分析 思路 1.三个鼠标事件,mousedown,mousemove,mouseup 2.可移动性absolute 3.边界限制 得到鼠标点击处和div边界的距离,然后得出top 和 left ...

  6. JS拖拽div(移动)

    <!doctype html><html><head> <meta charset="utf-8"> <title>JS ...

  7. 浅谈js拖拽

    本文来自网易云社区 作者:刘凌阳 前言 本文依据半年前本人的分享<浅谈js拖拽>撰写,算是一篇迟到的文章. 基本思路 虽然现在关于拖拽的组件库到处都是,HTML5也把拖放纳入了标准.但考虑 ...

  8. 一步一步实现JS拖拽插件

    js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠 ...

  9. 原生js拖拽、jQuery拖拽、vue自定义指令拖拽

    原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

随机推荐

  1. python wechat_sdk间接性的出现错误OfficialAPIError: 40001,说access_token已过期或者不是最新的。

    原因是部署django时使用了多进程,每个进程都会去请求access_token,只有最新的那个有效

  2. 一个关于发邮件的类,可以模拟发送对smtp服务器或者是本地文件夹

    namespace SportsStore.Domain.Concrete { public class EmailSettings { public string MailToAddress = & ...

  3. android 提高进程优先级 拍照永不崩溃(闪退)

    首先科普一下Android系统进程的优先级: 当系统的内存不足时, android系统将根据进程优先级选择杀死一些不太重要的进程. 进程优先级从高到低分别为: 1. 前台进程. 以下的进程为前台进程: ...

  4. 关于Android studio 相对 eclipse 优点

    优点:说法一 1.Google推出的,这个是它的最大优势,Android Stuido是Google推出,专门为Android"量身订做"的 2.速度更快,Eclipse的启动速度 ...

  5. 解决IllegalStateException: Can not perform this action after onSaveInstanceState

    今天使用Fragment的时候,出现了这个错误 IllegalStateException: Can not perform this action after onSaveInstanceState ...

  6. Ubuntu上部署Ghost博客

    所有文章搬运自我的个人主页:sheilasun.me 刚刚成功把自己的ghost博客部署到Linode VPS上了,在这里回顾并顺便整理一下从购买域名到部署代码到服务器的整个过程. 购买域名 万网或者 ...

  7. 如何让 Drupal 使用 Wordpress 形式的编辑代码?

    如果你曾有过将 Wordpress 网站迁移到 Drupal 的经验,很可能客户会问的第一件事就是如何为 Drupal 添加编辑代码. Wordpress 中的 Shortcodes 插件让使用者可以 ...

  8. 慕课网-安卓工程师初养成-3-9 Java中运算符的优先级

    来源 http://www.imooc.com/code/1315 所谓优先级,就是在表达式中的运算顺序.Java 中常用的运算符的优先级如下表所示: 级别为 1 的优先级最高,级别 11 的优先级最 ...

  9. The init method

    The init method is a special method that gets invoked when an object is instantiated. Its full name ...

  10. svn执行clean up命令时报错

    svn执行clean up命令时报错“Previous operation has not finished; run 'cleanup' if it was interrupted”.无论你到那个父 ...