<!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. 让IE6支持min-height,max-height等的方法

    1.IE6支持max-height解决方法    IE6支持最大高度解决CSS代码:.yangshi{max-height:1000px;_height:expression((document.do ...

  2. selenium测试（Java）--截图（十九）

    package com.test.screenshot; import java.io.File; import java.io.IOException; import org.apache.comm ...

  3. Hibernate中createCriteria即QBC查询的详细用法

    现在假设有一个Student类,内有id,name,age属性String hql = "from Student s";按照以前的做法,我们通常是Query query = se ...

  4. hibernate中一对多多对一关系设计的理解

    1.单向多对一和双向多对一的区别? 只需要从一方获取另一方的数据时 就使用单向关联双方都需要获取对方数据时 就使用双向关系 部门--人员 使用人员时如果只需要获取对应部门信息(user.getdept ...

  5. 象“［］”、“.”、“->”这类操作符前后不加空格

    象“［］”.“.”.“->”这类操作符前后不加空格. #include <iostream> #include <process.h> #include<stdio ...

  6. android 自定义照相机Camera黑屏 （转至 http://blog.csdn.net/chuchu521/article/details/8089058）

    对于一些手机,像HTC,当自定义Camera时,调用Camera.Parameters的 parameters.setPreviewSize(width, height)方法时,如果width和hei ...

  7. 【Latex】数学公式排版

    http://www.cnblogs.com/houkai/p/3399646.html 常用latex数学符号表 https://zh.wikipedia.org/wiki/Help:%E6%95% ...

  8. jQuery on()方法绑定动态元素的点击事件无响应的解决办法

    $('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count ...

  9. django 关闭debug模式，报500错误

    今天关闭了程序的debug模式,结果提示500错误.但是启动debug模式,又运行正常. Server Error (500) 上网查了以后,发现django1.5版本的要设置ALLOWED_HOST ...

  10. weblogic安装部署war包——windows

    ### weblogic安装部署war包——windows#### 下载weblogic安装包[csdn下载地址](https://download.csdn.net/download/luozhua ...