<!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. QThread 的使用方法及函数解析

    近日,使用QThread,一些问题百思不得其解,看过大牛的文章,恍然大悟啊. 原文 http://hi.baidu.com/dbzhang800/item/c14c97dd15318d17e1f46f ...

  2. get提交

    <?php // 本类由系统自动生成,仅供测试用途 class IndexAction extends Action { //显示用户 public function index(){ $Use ...

  3. 高速入门：十分钟学会Python

    初试牛刀 如果你希望学习Python这门语言.却苦于找不到一个简短而全面的新手教程.那么本教程将花费十分钟的时间带你走入Python的大门.本文的内容介于教程(Toturial)和速查手冊(Cheat ...

  4. 转载：erlang程序优化点的总结

    erlang程序优化点的总结(持续更新) 转自:http://wqtn22.iteye.com/blog/1820587 转载请注明出处 注意,这里只是给出一个总结,具体性能需要根据实际环境和需要来确 ...

  5. 【Java面试题】26 多线程有几种实现方法?同步有几种实现方法? 当一个线程进入一个对象的一个synchronized方法后，其它线程是否可进入此对象的其它方法？

    问题一:多线程有几种实现方法?同步有几种实现方法? 多线程有两种实现方法,分别是继承Thread类与实现Runnable接口   同步的实现方面有两种,分别是synchronized,wait与not ...

  6. LR通用的性能分析流程

    Step1:从分析Summary的事务执行情况入手Summary主要是判定事务的响应时间与执行情况是否合理.如果发现问题,则需要做进一步分析.通常情况下,如果事务执行情况失败或响应时间过长等,都需要做 ...

  7. C# CRC16 查表法

    private static ushort[] crctab = new ushort[256]{                      0x0000, 0x1021, 0x2042, 0x306 ...

  8. HTML&CSS精选笔记_盒子模型

    盒子模型 认识盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margi ...

  9. 关于直播学习笔记-005 nginx-rtmp、sewiseplayer

    1.视频采集推流及服务器端:nginx-rtmp-windows 2.视频播放段:sewiseplayer 3.双击nginx.exe运行nginx-rtmp-win32-master的nginx服务 ...

  10. Tomcat连接参数的优化，主要是针对吞吐量做优化

    Tomcat连接参数的优化,主要是针对吞吐量做优化: 修改conf/server.xml文件,把原来 <Connector port="8080" protocol=&quo ...