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. VisualVM 的 OQL 的一些例子

    Visual VM的OQL语言是对HeapDump进行查询,类似于SQL的查询语言,它的基本语法如下: select <JavaScript expression to select> [ ...

  2. Ext TreeGrid提交修改过的数据

    本打算将整个treestore的数据提交到服务器,但找来找去没有找到好的方法,在翻api的时候发现了getUpdatedRecords()方法,拿来一试,试出此方法可以拿到被修改过的record so ...

  3. [kuangbin带你飞]专题七 线段树

            ID Origin Title 228 / 440 Problem A HDU 1166 敌兵布阵   207 / 438 Problem B HDU 1754 I Hate It   ...

  4. [POJ 2063] Investment (动态规划)

    题目链接:http://poj.org/problem?id=2063 题意:银行每年提供d种债券,每种债券需要付出p[i]块钱,然后一年的收入是v[i],到期后我们把本金+收入取出来作为下一年度本金 ...

  5. Python第九章模块和包

    1.import Python文件的时候文件名不能跟Python中自带的关键字重复,否则无法使用关键字的方法. 2.Reload(),重载例子 import sysreload(sys)sys.set ...

  6. (转)log4net的配置详解

    原文地址:http://blog.csdn.net/pfe_nova/article/details/12225349 log4net是一款优秀的第三方日志框架,可以很容易的加载到开发项目中(引用lo ...

  7. 利用Jersey构建REST之入门实例

    一.依赖包 1.目录结构如下:

  8. T4 assembly

    In a T4 template the executing assembly is not yours but one from the T4 engine. To access types fro ...

  9. OC基础(8)

    自定义代码段 实例变量修饰符 依赖关系 *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bott ...

  10. Android开发-API指南- Calendar Provider

    Calendar Provider 英文原文:http://developer.android.com/guide/topics/providers/calendar-provider.html 采集 ...