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. LeetCode Lowest Common Ancestor of a Binary Serach Tree

    Given a binary search tree (BST), find the lowest common ancestor (LCA) of two given nodes in the BS ...

  2. The Ninth Hunan Collegiate Programming Contest (2013) Problem I

    Problem I Interesting Calculator There is an interesting calculator. It has 3 rows of button. Row 1: ...

  3. 通过weka.jar包来进行数据预处理

    前言:注意首先要将weka.jar包加载到相应的路径中去.程序中的数据也是用的weka自带的数据. 扩展:eclipse添加jar包的操作方法: 打开eclipse ,在对应的工程下右击,选择Buil ...

  4. ASP.NET5 中静态文件的各种使用方式

    所谓静态文件,包含HTML文件,css文件.图片文件和js文件等,他们是服务器直接读取到客户端的一些资源,在这篇文章中,我们将解释关于ASP.NET5和静态文件的一些内容. 服务端的静态文件 默认情况 ...

  5. autoit UIA获取Listview的信息

    #include "CUIAutomation2.au3" Opt( ) Global $oUIAutomation MainFunc() Func MainFunc() ; Be ...

  6. oracle学习系列之四 (视图)

    视图视图是数据库中特有的对象.视图用于存储查询,但不会存储数据(物化视图除外).这是视图和数据表的重要区别.可以利用视图进行查询,插入,更新和删除数据.Oracle有如下四种视图(关系视图,内嵌视图, ...

  7. HTML5--》点击显示隐藏内容

    <details>浏览器支持比较差,可以用JavaScript实现这种功能. <!doctype html> <html> <head> <met ...

  8. SVN与TortoiseSVN实战:冲突详解(二)

    硬广:<SVN与TortoiseSVN实战>系列已经写了四篇,第二篇<SVN与TortoiseSVN实战:标签与分支>和第三篇<SVN与TortoiseSVN实战:Tor ...

  9. 详解H264视频格式-2016.01.28

    专业名词解释 VCL(Video Coding Layer)视频编码层 NAL(Network Abstraction Layer)网络提取层 SPS(Sequence Parameter Set) ...

  10. 【MySQL】MySQL无基础学习和入门之二:MySQL的安装

    安装MySQL安装一般分为源码包编译安装.分发包.rpm包安装和yum安装,四种安装方式有一些区别,对应的适用场景也不一样. 源码包:源码包就是程序源代码包,其中包含程序代码文件,这些代码文件是文本型 ...