<!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. XML 入门

    XML语法 所有 XML 元素都须有关闭标签 XML 标签对大小写敏感 XML 必须正确地嵌套 XML 文档必须有根元素 就像HTML一样,HTML必须有<html>根元素.XML也必须有 ...

  2. linux -- ubuntu 何为软件源

    新手学Ubuntu的时候,一般不知道什么是源,但源又是Ubuntu下常用到的东西.因此,本文就详细介绍一下Ubuntu 源. 什么是软件源? 源,在Ubuntu下,它相当于软件库,需要什么软件,只要记 ...

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

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

  4. 根据多表条件更新表.............. 一条sql语句.............

    CREATE TABLE a( NAME INT, age int ); CREATE TABLE b( height INT, weight int ); ,); ,); SELECT * FROM ...

  5. mysql数据库要按当天、昨天、前七日、近三十天、季度、年查询

    mysql数据库要按当天.昨天.前七日.近三十天.季度.年查询

  6. electron-searchMovies

    之前学了electron,前段时间又学了一下vue,为了增加熟练度决定将两者结合做个有趣的东西.想来想去最后决定将原来用 PyQt 写的MovieHeavens重新写一遍,使用electron-vue ...

  7. PHP开启伪静态配置

    1.检测Apache是否开启mod_rewrite功能 可以通过php提供的phpinfo()函数查看环境配置,找到“Loaded Modules”,其中列出了所有apache2handler已经开启 ...

  8. ios开发之--ios11适配：TableView的heightForHeaderInSection设置高度无效/UISearchBar消失

    更新到ios11,然后使用x-code9运行项目,发现tableview的-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInS ...

  9. docker pull 详解

    docker pull 用于从镜像仓库中拉取或更新指定镜像,用法如:docker pull centos ,默认是从 Docker Hub 中拉取镜像 在拉取镜像前,我们可以先配置 docker 加速 ...

  10. SQL基础--视图

     视图其实就是一条查询SQL语句,用于显示一个或多个表或其它视图中相关数据. 创建视图: CREATE [OR REPLACE] ［FORCE |NOFORCE ］VIEW view_name [al ...