可以拖拽的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. Android N特性解析

    作者:Redyan, 腾讯移动客户端开发工程师 商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. 原文链接:http://wetest.qq.com/lab/view/288.html ...

  2. 读书笔记 effective c++ Item 24 如果函数的所有参数都需要类型转换，将其声明成非成员函数

    1. 将需要隐式类型转换的函数声明为成员函数会出现问题 使类支持隐式转换是一个坏的想法.当然也有例外的情况,最常见的一个例子就是数值类型.举个例子,如果你设计一个表示有理数的类,允许从整型到有理数的隐 ...

  3. 【Eclipse】web项目部署新手篇

    本文属于新手篇章,记录了Eclipse中部署web项目的步骤 1 . 添加Tomcat服务器 右键项目属性-->Run as-->Run on server弹出以下界面 点击finish之 ...

  4. H5微场景宽、高度自适应办法

    最近在做一些手机端微场景,发现处理各种手机屏幕分辨率是个很让人头疼的事情,最终找到了一个处理效果比较满意的方案.各位客观请往下看: 如果有过做微场景经历的客官们应该都了解,在代码中给一个元素的宽高设成 ...

  5. 使用NTP协议服务器时间同步

    NTP是用来使系统和一个精确的时间源保持时间同步的协议.建议大家在自己管理的网络中建立至少一台时间服务器来同步本地时间,这样可以使得在不同的系统上处理和收集日志和管理更加容易.我们分别从windows ...

  6. MySQL优化四（优化表结构）

    body { font-family: Helvetica, arial, sans-serif; font-size: 14px; line-height: 1.6; padding-top: 10 ...

  7. 1702: [Usaco2007 Mar]Gold Balanced Lineup 平衡的队列

    1702: [Usaco2007 Mar]Gold Balanced Lineup 平衡的队列 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 510  S ...

  8. iPhone 设置铃声

    每次设置后,长时间不玩就忘记了,把写成博客:好记性不如烂笔头: 第一步:下载喜欢的音乐: 第二步,通过iTunes 文件 下的资料库 导入刚才下载的歌曲: 第三步:截取喜欢的部分,铃声最好设置在30秒 ...

  9. Java基础二：常量池

    目录: 自动装箱与拆箱 常量池 ==与equals()区别 1. 自动装箱与拆箱 Java是一个近乎纯洁的面向对象编程语言,但是为了编程的方便还是引入了基本数据类型,但是为了能够将这些基本数据类型当成 ...

  10. 老司机实战Windows Server Docker：4 单节点Windows Docker服务器简单运维（下）

    上篇中,我们主要介绍了使用docker-compose对Windows Docker单服务器进行远程管理,编译和部署镜像,并且设置容器的自动启动.但是,还有一些重要的问题没有解决,这些问题不解决,就完 ...