<!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. file-loader 使用心得

    将webpack 里面的图片文件都放在制定文件夹. 配置如下 { test: /\.png$/, loader: "file-loader?name=imgs/[name]-[hash].[ ...

  2. PHP面向对象-----魔术方法

    PHP面向对象-----魔术方法 __get($name)--触发时机:当调用一个不访问的成员属性的时候,会自动触发,可以利用这个方法来完成对不可调用的属性进行调用,但是不能设置值 ___set($n ...

  3. 移动端H5制作安卓和IOS的坑 持续更新...

    移动端H5制作安卓和IOS的坑 持续更新... 前言:最近参加公司的H5页面创意竞赛,又遇到不少页面在不同系统上的坑.踩坑之余,觉得很多之前遇到的知识点都忘了,索性开一篇博文,把这些坑都统一归纳起来, ...

  4. Springboot读取配置文件及自定义配置文件

    1.创建maven工程,在pom文件中添加依赖 <parent> <groupId>org.springframework.boot</groupId> <a ...

  5. javaScript 验证码 倒计时60秒

    <input type="button" id="btn" value="免费获取验证码" /> <script type ...

  6. Android IntentService的使用和源码分析

    引言 Service服务是Android四大组件之一,在Android中有着举足重轻的作用.Service服务是工作的UI线程中,当你的应用需要下载一个文件或者播放音乐等长期处于后台工作而有没有UI界 ...

  7. 相似QQ对话框上下部分可拖动代码

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 2016.3.17__CSS3动画__第十一天

    CSS3动画 假设您认为这篇文章还不错,能够去H5专题介绍中查看很多其它相关文章. 通过 CSS3,我们能够创建动画,这能够在很多网页中取代动绘图片.Flash 动画以及 JavaScript. 今日 ...

  9. 指尖上的电商---(4).net开发solr

    这一节我们看下如何把查询数据放到server端存储,这里我们须要使用client工具来操作与服务端数据打交道,网上有好多基于.NET开发的SOLRclient,我们这里选择easynet.solr,非 ...

  10. html5 canvas 画板

    <!doctype html> <head> <meta http-equiv="Content-Type" content="text/h ...