<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

#div1 {width: 100px; height: 100px; background: red; position: absolute;}

#img1 { position: absolute;}

</style>

<script>

window.onload = function() {

    var oDiv = document.getElementById('div1');

    var oImg = document.getElementById('img1');

    drag(oImg);

    drag(oDiv);

    function drag(obj) {

        obj.onmousedown = function(ev) {

            var ev = ev || event;

            var disX = ev.clientX - this.offsetLeft;

            var disY = ev.clientY - this.offsetTop;

            if ( obj.setCapture ) {

                obj.setCapture();

            }

            document.onmousemove = function(ev) {

                var ev = ev || event;

                obj.style.left = ev.clientX - disX + 'px';

                obj.style.top = ev.clientY - disY + 'px';

            }

            document.onmouseup = function() {

                document.onmousemove = document.onmouseup = null;

                //释放全局捕获 releaseCapture();

                if ( obj.releaseCapture ) {

                    obj.releaseCapture();

                }

            }

            return false;

        }

    }

}

</script>

</head>

<body>

    <div id="div1"></div>

    <img src="1.jpg" id="img1" />

</body>

</html>

js拖拽的封装的更多相关文章

  1. 好用的JS拖拽插件

    下载artDialog插件的时候发现它把拖拽单独封装成了一个方法,挺好用的,使用方法如下... 第一种拖拽方式-点击容器指定区域进行拖拽 $('.ui-dialog').on(DragEvent.ty ...

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

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

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

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

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

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

  5. js拖拽效果

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

  6. JS拖拽原理

    实现拖拽效果主要跟鼠标的三个事件有关: onmousedown : 选择要拖拽的元素 onmousemove : 移动元素 onmouseup : 释放元素 三个事件的关系: obj.onmoused ...

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

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

  8. js拖拽分析

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

  9. JS拖拽div（移动）

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

随机推荐

  1. TensorFlow —— Demo

    import tensorflow as tf g = tf.Graph() # 创建一个Graph对象 在模型中有两个"全局"风格的Variable对象:global_step ...

  2. 51Nod 1289 大鱼吃小鱼 栈模拟 思路

    1289 大鱼吃小鱼 栈模拟 思路 题目链接 https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1289 思路: 用栈来模拟 ...

  3. js作用域与执行环境（前端基础系列）

    一.作用域(what?) 官方解释是:"一段程序代码中所用到的名字并不总是有效/可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域." 单从文字理解比较难懂,举个栗子: ...

  4. Java VS .NET：Java与.NET的特点对比

    一.前言 为什么要写Java跟.NET对比? .NET出生之后就带着Java的影子.从模仿到创新,.NET平台也越来越成熟.他们不同的支持者也经常因为孰弱孰强的问题争论不休.但是本文并不是为了一分高下 ...

  5. IEEE Trans 2008 Gradient Pursuits论文学习

    之前所学习的论文中求解稀疏解的时候一般采用的都是最小二乘方法进行计算,为了降低计算复杂度和减少内存,这篇论文梯度追踪,属于贪婪算法中一种.主要为三种:梯度(gradient).共轭梯度(conjuga ...

  6. replace深入

    var b = 0; var arr = []; str = str.replace(/J/g,function(){ var args = arguments; b++; arr.push(args ...

  7. mongodb的NUMA问题

    问题: 在mongodb登录时日志显演示样例如以下: [loguser@32_180 ~]$ mongo -u root -p xxxxx --authenticationDatabase adm ...

  8. 浅析Spring事务传播行为和隔离级别

    7个传播行为.4个隔离级别. Spring事务的传播行为和隔离级别[transaction behaviorand isolatedlevel] Spring中事务的定义: Propagation(k ...

  9. Java高级开发工程师面试——多线程

    来自:Sanesee 链接:http://www.sanesee.com/article/java-engineer-interview-of-thread 1.进程和线程的区别? 进程是一个具有独立 ...

  10. RPC-client异步收发核心细节？

    通过上篇文章的介绍,知道了要实施微服务,首先要搞定RPC框架,RPC框架分为客户端部分与服务端部分. RPC-client的部分又分为: (1)序列化反序列化的部分(上图中的1.4) (2)发送字节流 ...