<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script>

window.onload = function ()

{

    var odiv = document.getElementById('wrap');

    odiv.onmousedown = function (ev)

    {

        var ev = ev || event;

        var L1 = ev.clientX - odiv.offsetLeft

        var T1 = ev.clientY - odiv.offsetTop;

        var oadd = document.createElement('div');

        if(odiv.setCapture)

        {

            odiv.setCapture();

        }

        odiv.appendChild(oadd);

        document.onmousemove = function (ev)

        {

            var ev = ev || event;

            var L2 = ev.clientX - odiv.offsetLeft

            var T2 = ev.clientY - odiv.offsetTop;

            L2 = L2 < 0 ? 0 : L2;

            L2 = L2 > odiv.clientWidth ? odiv.clientWidth : L2;

            T2 = T2 < 0 ? 0 : T2;

            T2 = T2 > odiv.clientHeight ? odiv.clientHeight: T2;

            oadd.style.cssText = 'border: 1px solid red;'

            oadd.style.left = L1 < L2 ?(L1 + 'px'):(L2 + 'px');

            oadd.style.top = T1 > T2 ? (T2 + 'px'):(T1 + 'px');

            oadd.style.width = Math.abs(Math.abs(L1 - L2)-2) + 'px';

            oadd.style.height = Math.abs(Math.abs(T1 - T2)-2) + 'px';

        };

        document.onmouseup = function ()

        {

            document.onmousemove = document.onmousedown = null;

            if(odiv.releaseCapture)

            {

                odiv.releaseCapture();

            }

        }

        return false;

    };

};

</script>

<style>

body {

    margin:0px;

    padding:0px;

    }

#wrap {

    width: 700px;

    height: 500px;

    border: 1px solid #000;

    margin: 60px auto 10px;

    position: relative;

}

#wrap div{

    position:absolute;

    }

p {

    text-align: center;

    margin: 0px;

    padding: 10px;

    }

</style>

</head>

<body>

<div id="wrap">

</div>

<p>可以在上面的方框中任意拉出方块</p>

</body>

</html>

dom 绘制正方形的更多相关文章

  1. openGL绘制正方形

    /** * 缓冲区工具类 */public class BufferUtil { /**  * 将浮点数组转换成字节缓冲区  */ public static ByteBuffer arr2ByteB ...

  2. 继承View绘制正方形且360旋转

    import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; impor ...

  3. Android OpenGL 入门示例----绘制三角形和正方形

    Android上对OpenGl的支持是无缝的,所以才有众多3D效果如此逼真的游戏,在Camera的一些流程中也有用到GLSurfaceView的情况.本文记录OpenGL在Android上的入门级示例 ...

  4. 利用Python绘制一个正方形螺旋线

    1 安装turtle Python2安装命令: pip install turtule Python3安装命令: pip3 install turtle 因为turtle库主要是在Python2中使用 ...

  5. Quartz2D复习（一）--- 基础知识 / 绘制线段圆弧 / 图片水印 / 截图

    1.Quartz 2D是一个二维绘图引擎,同时支持ios和Mac系统: Quart2D的API是纯C语言的,API来自于Core  Graphics框架: 2.Quartz 2D可以绘制图形(线段/三 ...

  6. Java之绘制实例

    前面已经介绍过绘制方法. 弧形的绘制: package com.caiduping; import java.awt.Graphics; import javax.swing.JFrame; impo ...

  7. HTML5之Canvas画正方形

    HTML5之Canvas画正方形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...

  8. matplotlib点线 坐标刻度 3D图绘制(六)

    plot语句中支持除X,Y以外的参数,以字符串形式存在,来控制颜色.线型.点型等要素,语法形式为: plt.plot(X, Y, 'format', ...) 1 点和线的样式 颜色 参数color或 ...

  9. 笔记-8：使用turtle库进行图形绘制

    1.窗体函数 turtle.setup(width,height,startx,starty) 作用:设置窗体的大小和位置 width:窗口宽度,如果值是整数,表示像素值:如果值是小数,表示窗口宽度与 ...

随机推荐

  1. 了解ThinkPHP(一)

    1.项目开发,中,会遇到的问题: 1). 多人开发项目,分工不合理,(html   php   mysql) 2). 代码风格不一样,后期维护十分困难 3). 项目生命周期十分短,项目生命没有延续性, ...

  2. 汉字编码：GB2312, GBK, GB18030, Big5

    前一篇博文:ANSI是什么编码?中有这样一段小故事: 话说计算机是由美国佬搞出来的嘛,他们觉得一个字节(可以表示256个编码)表示英语世界里所有的字母.数字和常用特殊符号已经绰绰有余了(其实ASCII ...

  3. DBContext

    http://www.entityframeworktutorial.net/EntityFramework4.3/dbcontext-vs-objectcontext.aspx As you hav ...

  4. Effective STL 中文版(大全)

    Effective STL 中文版(大全) 作者:winter 候捷说,对于STL,程序员有三个境界,开始是使用STL,然后是理解STL,最后是补充STL.Effective STL是一本非常好的书, ...

  5. 【笨嘴拙舌WINDOWS】BMP图片浏览器

    要将文件显示成图片这其中需要经过 1.将磁盘文件内容读取到内存: 2.将文件对应内存里包含的像素为以及像素信息转化为显示驱动器能理解的格式: 3.将转化过后的内存送到显卡的缓存区 4.显示器读取缓存现 ...

  6. volley(5) 参数total_remain:totalqty, data:[{ bar_status:XX , bar_code: "XX",bar_remain:XX, bar_whcode:"XX" , bar_prodcode:"XX",bar_id:XX,bar_location: "XX", pr_detail: "XX" , bar_batchcode:method:POST

    1. 来源  : WHCombineBatchFragment.java 2. 部分代码 WHCombineBatchFragmentCombineBtnClickEvent whc2;private ...

  7. [转]C#中的？和？？

    原文链接:http://msdn.microsoft.com/zh-tw/library/2cf62fcy%28VS.80%29.aspx 使用可為 Null 的型別 (C# 程式設計手冊) Visu ...

  8. BZOJ 2303 方格染色

    首先考虑四个格子异或值为1. 然后(重点)发现每个格子的值只和最上面,最左边,和(1,1)的格子的颜色有关. 枚举(1,1)的颜色,联立方程,可以将未知数减少,那么并查集可做. 最后算答案的时候,有些 ...

  9. POJ 1861 Network （MST）

    题意:求解最小生成树,以及最小瓶颈生成树上的瓶颈边. 思路:只是求最小生成树即可.瓶颈边就是生成树上权值最大的那条边. //#include <bits/stdc++.h> #includ ...

  10. T-SQL备忘(5)：查看执行计划

    先理解几个概念:表扫描.聚集索引扫描.聚集索引查找.索引扫描.书签查找. [查看执行计划] 在理解概念之前先得知道如何查看执行计划—Ctrl+L.如下图: 注:SQL Server的执行计划是从右向左 ...