<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>拖拽效果</title>

<style>

#div1 {width:200px; height:200px; background:blue; position:absolute;}

</style>

<script>

window.onload=function ()

{

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

    oDiv.onmousedown=function (ev)

    {

        var oEvent=ev||event;

        var disX=oEvent.clientX-oDiv.offsetLeft;

        var disY=oEvent.clientY-oDiv.offsetTop;

        document.onmousemove=function (ev)

        {

            var oEvent=ev||event;

            oDiv.style.left=oEvent.clientX-disX+'px';

            oDiv.style.top=oEvent.clientY-disY+'px';

        };

        document.onmouseup=function ()

        {

            document.onmousemove=null;

            document.onmouseup=null;

        };

    };

};

</script>

</head>

<body>

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

</body>

</html>

链接：Markdown 编辑器语法指南

JS实现拖拽效果的更多相关文章

  1. js 鼠标拖拽效果实现

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. 原生js实现拖拽效果

    面向对象 + 原生js拖拽 拖拽div等盒子模型,都是日常操作没有什么问题,如果是拖拽图片的话,会有一点小坑要踩...... 那么我们看代码: var Move_fn = {}; (function( ...

  3. 【转】JS容器拖拽效果，并通过cookie保存拖拽各容器的所在位置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. JS移动客户端--触屏滑动事件及js手机拖拽效果

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  5. js基础拖拽效果

    function drag(ele) { const config = { mark: 0, x: 0, y: 0, left: ele.offsetLeft, top: ele.offsetTop, ...

  6. JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm   这篇文章主要介绍了JS实现漂亮的窗口 ...

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

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

  8. js拖拽效果

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

  9. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. javaScript之function定义

    背景知识 函数定义 在javaScript中,function的定义有3种: 1.匿名定义                function(){} 2.非匿名定义                fun ...

  2. android 监听Home键

    /** * Home 键监听,当按下Home键时,系统会发出action为Intent.ACTION_CLOSE_SYSTEM_DIALOGS的BroadcastReceiver * 在程序里动态注册 ...

  3. 关于Cocos2d-x中增加暂停按钮的步骤

    1.在GameScene.cpp的init方法中先定义一个里面放着可变换并在变换的时候会响应事件的MenuItem的Menu,这个Menu里面的可变换MenuItem又由两个小MenuItem组成,每 ...

  4. Android isUserAMonkey()

    Monkey是Android上的一个自动化测试工具.产生随机事件由于压力测试等. ActivityManager.isUserAMonkey()判断当前是否有运行的Monkey测试.有就返回true. ...

  5. imx6 hdmi接口支持

    /************************************************************* * imx6 hdmi接口支持 * 新的板子需要使用到hdmi,今天就测试 ...

  6. nest(inner) class

    嵌套类,摘自: http://www.ntu.edu.sg/home/ehchua/programmin/java/J4a_GUI.html A nested class has these prop ...

  7. 第三百零三节，Django框架介绍——用pycharm创建Django项目

    Django框架介绍 Django是一个开放源代码的Web应用框架,由Python写成.采用了MVC的软件设计模式,即模型M,视图V和控制器C.它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内 ...

  8. devstack install attributeError: 'module' object has no attribute '__version__'

    work around: edit the file /usr/local/lib/python2.7/dist-packages/openstack/session.py and remove th ...

  9. 教你如何架设linux邮件服务器postfix

    检查linux是否有安装postfix和dovecot 检查命令如下: Rpm  -qa |grep  postfix; Rpm –qa |grep dovecot; 如果没有显示任何数据,表明没有安 ...

  10. [ATL/WTL]_[中级]_[保存CBitmap到文件-保存屏幕内容到文件]

    场景: 1. 在做图片处理时,比方放大后或加特效后须要保存CBitmap(HBITMAP)到文件. 2.截取屏幕内容到文件时. 3.不须要增加第3方库时. 说明: 这段代码部分来自网上.第一次学atl ...