可以拖拽的div

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>

#div1 {width:100px; height:100px; background:red; position:absolute;}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>可以拖拽的div</title>

<script>

window.onload=function ()

{

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

    var disX=0;

    var disY=0;

    oDiv.onmousedown=function (ev)

    {

        var oEvent=ev||event;

        disX=oEvent.clientX-oDiv.offsetLeft;

        disY=oEvent.clientY-oDiv.offsetTop;

        document.onmousemove=function (ev)

        {

            var oEvent=ev||event;

            var l=oEvent.clientX-disX;

            var t=oEvent.clientY-disY;

            if(l<0)

            {

                l=0;

            }

            else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)

            {

                l=document.documentElement.clientWidth-oDiv.offsetWidth;

            }

            if(t<0)

            {

                t=0;

            }

            else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)

            {

                t=document.documentElement.clientHeight-oDiv.offsetHeight;

            }

            oDiv.style.left=l+'px';

            oDiv.style.top=t+'px';

        };

        document.onmouseup=function ()

        {

            document.onmousemove=null;

            document.onmouseup=null;

        };

        return false;

    };

};

</script>

</head>

<body>

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

</body>

</html>

可以随鼠标拖拽的div的更多相关文章

  1. JavaScript鼠标拖拽特效及相关问题总结

    #div1{width:200px;height:200px;background:red;position:absolute;} #div2{width:200px;height:200px;bac ...

  2. 一款基于jQuery的支持鼠标拖拽滑动焦点图

    记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...

  3. 鼠标拖拽定位和DOM各种尺寸详解

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. html5的鼠标拖拽

    鼠标拖拽 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  5. javascript鼠标拖拽的那些事情

    <html> <head> <title>javascript鼠标拖拽的那些事情</title> <meta http-equiv="C ...

  6. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  7. 完美实现鼠标拖拽事件，解决各种小bug，基于jquery

    鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...

  8. day50—JavaScript鼠标拖拽事件

    转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...

  9. js - 面向对象 - 小案例：轮播图、随机点名、选项卡、鼠标拖拽

    面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...

随机推荐

  1. 纪中集训 Day 3

    这几天一直坚持写blog= =加油吧！！ 早上醒来，说了"我要AK"(其实只是蒟蒻的妄想罢了QAQ) 然后为了不立flag，改成了我要rank 1 然后依旧是有一题不会做QAQ 好 ...

  2. Javascript学习九

    计时器setInterval() 在执行时,从载入页面后每隔指定的时间执行代码. 语法: setInterval(代码,交互时间); 参数说明: 1. 代码:要调用的函数或要执行的代码串. 2. 交互 ...

  3. HTML第一课

    <标签名 属性>内容</标签名> <标签/> 静态网页与动态网页的区别:是否从数据库提取数据相对路径跟绝对路径../代表高一级的&nbsp牛逼的空格< ...

  4. [转载]解决win10 VC++6.0 应用程序无法正常运行 0xc0000142

    本文转载自http://blog.csdn.net/w_9449/article/details/52864135 转载请申明哦,其实我发现自从我在贴吧发了帖子后,就冒出了不少帖子.经验.当然方法和我 ...

  5. Linux 安装DenyHost防止ssh被暴力破解

    DenyHosts介绍 当你的linux服务器暴露在外网当中时,服务器就极有可能会遭到互联网上的扫描软件进行扫描,然后试图连接ssh端口进行暴力破解(穷举扫描).如果遇到这个问题,一款非常有用的工具D ...

  6. LeetCode 2. Add Two Numbers 解题报告

    题意: 有两个链表,它们表示逆序的两个非负数.例 (2 -> 4 -> 3)表示342,求两个数字的和,并用同样的方式逆序输出.如342+465 = 807,你需要把结果表达为(7 -&g ...

  7. KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架之koahub-loader

    koahub loader Installation $ npm install koahub-loader Use with koa  // 1.model loader   var model = ...

  8. 【HLA】初识HLA/RTI

    本文主要对近期所翻阅的一些论文及资料进行的概要性整理,后续会有更多的关于HLA的研究细节发布,基于博客园的知识共享平台,以期共同进步! 一.引言 仿真的历史由来已久,在系统研制过程中,基于建模及仿真技 ...

  9. hibernate从数据库中自动生成

    计应134(实验班) 李佳鸿 DB Brower配置 1.依次选择window-Open Perspective-MyEclipse Explorer

  10. Permanent Generation Removal Overview（译文）

    英文原稿:http://vdisk.weibo.com/s/vxGdGZEZTEjk 中文整理稿:http://it.deepinmind.com/gc/2014/05/14/metaspace-in ...