可以拖拽的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. 【问题解决】使用自定义控件时，vs停止工作

    问题表现:向页面中添加自定义控件时,vs卡住了,随便点击一下,然后窗口未响应,然后用资源管理器看到内存使用在飙升,监视进程会发现就是vs的进程出现了异常 问题的解决:菜鸟D在网上搜了一下,发现一个奇葩 ...

  2. VS2015在Windows 10 下面安装经验

    实体机环境:Windows 10 专业版(2017年2月28日 官方下载版本) VS2015:cn_visual_studio_enterprise_2015_with_update_3_x86_x6 ...

  3. ios 相机调用之读取相册

    UIIamgePickerControllerr可以从照片库中读取一张图片到咱们应用程序中来   步骤:   //创建图片判断图片库是否可以使用   if([UIImagePickerControll ...

  4. Matlab立体标定mat转换成Opencv的CvMat

    最近在做基于双目视觉的三维重建.比较opencv和matlab工具箱的立体标定结果精度时,发现貌似如果手工选取角点不那么离谱的话,matlab标定结果精度更高也更鲁棒.就想先用matlab标定好相机, ...

  5. 第十四篇 SQL游标、函数的使用方法

         游标的的使用有日常的开发和维护的过程不使用的并不多,但是碰到一些棘手的问题的时候,游标时常是个非常好的帮手,下面就说下游标的使用方法,方法自己以后查阅,和加深一些印象,下面以一个存储过程为例 ...

  6. Easyui _treegrid 动态加载子节点

    <table id="dg" class="easyui-treegrid" title="数据字典列表" data-options= ...

  7. js基础---cookie存储

    一.Cookie是什么Cookie是一种客户端(浏览器)把用户信息以文件形式存储到本地硬盘的技术,说白了就是一种浏览器技术 二.Cookie的作用Cookie的作用很单一,就是存储客户数据.(存储数据 ...

  8. css样式表1 2017-03-11

    样式表 DIV + CSS 一.        样式表的分类 以下均以div标签为例,可以换成其他标签 1.  内联样式表 格式: style="属性1:属性值1:属性2:属性值2:属性3: ...

  9. 【SSH项目实战三】脚本密钥的批量分发与执行

    [SSH项目实战]脚本密钥的批量分发与执行 标签(空格分隔): Linux服务搭建-陈思齐 ---本教学笔记是本人学习和工作生涯中的摘记整理而成,此为初稿(尚有诸多不完善之处),为原创作品,允许转载, ...

  10. iOS开发优秀博客和软件推荐

    iOSBlogAndTools iOS开发优秀博客和软件推荐 本博客和工具列表由广大iOS开发者收集和推荐,如果大家有好的博客或者工具想要分享请点击:我要提交. 收到大家的提交后会及时收录与更新.Gi ...