<!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. mysql命令行远程登录命令

    mysql -u root -psalon365365 -h 192.168.1.103 -P 3 306 -D empirecms

  2. 当点击onBackpress方法或者onKeyDown方法时出现不能响应的问题解决办法

    一般来讲,当我们点击手机上的back键之后,会直接调用activity的onbackpress()方法,或者我们也可以通过这样来进行捕捉点击事件 @Override public boolean on ...

  3. KEGG orthology (KO) 数据库简介

    KEGG, 简称京都基因组百科全书,包含了许多的数据库,对于研究基因功能来说,KEGG orthology 数据库是最基本的一个数据库: KEGG Orthology 简称KO, 对于每个功能已知的基 ...

  4. PHP大量数据循环时内存耗尽问题的解决方案

    最近在开发一个PHP程序时遇到了下面的错误:PHP Fatal error: Allowed memory size of 268 435 456 bytes exhausted错误信息显...分析: ...

  5. spark on yarn(zookeeper 配置)

    http://database.51cto.com/art/201404/435630.htm

  6. Android SDK的安装教程

      Android4.1虽说已经发布了好些天,但由于的我手机比较坑,系统依旧保持在2.3.4.0的都是可望不可即的了,就别说4.1.由于资金的问题,没法换手机,只能另想方法,通过在笔记本上装andro ...

  7. THINKPHP include 标签动态加载文件

    有时候需要在框架中动态的加载一些文件,文件名不确定,有控制器获取得到,想在模板中使用变量的形式进行加载,本以为这样写可以 结果不行 <include file="User/{$my_t ...

  8. Thinkphp 修改U方法按路由规则生成url

    tp开户路由后,使用U方法是不会按路由规则生成url的,一般我们是要手动修改模版,把里面的U方法去掉,手动修改链接,如果是已经写好的程序,后期才添加路由,修改起链接就太麻烦了 今天无聊就修改了一下U方 ...

  9. ionic简单路由及页面传参

    1)页面跳转及传参方法 angular.module('app.routes', [])//routes路由模型 .config(function($stateProvider, $urlRouter ...

  10. Python 入门（五）条件判断和循环

    if语句 计算机之所以能做很多自动化的任务,因为它可以自己做条件判断. 比如,输入用户年龄,根据年龄打印不同的内容,在Python程序中,可以用if语句实现: age = 20 if age > ...