Question

HTML+js,如何实现拖动鼠标绘制一个矩形，鼠标拖动矩形还可以移动位置？

之前看你回答过这个问题，可是想看完整的答案你的空间还上不去。
要加上调整大小，还加双击移除。

同时还想实现可以画斜线，画多边形等功能。
大神求帮助。
最好 用JQ做
jQuery Sparklines
jqPlot 可以用这2个库中的一个最好

Answer 1

<!--<a href="https://www.baidu.com/s?wd=DOCTYPE&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dBP1n3PjTknAP9nH7hnvFW0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6K1TL0qnfK1TL0z5HD0IgF_5y9YIZ0lQzqlpA-bmyt8mh7GuZR8mvqVQL7dugPYpyq8Q1R1P16kPjn4Pf" target="_blank" class="baidu-highlight" -->DOCTYPE html>
 
 
<meta charset="gb2312">
<title></title>
<style type="text/css">
.box {
    background: #f00;
    width: 0px;
    height: 0px;
    position: absolute;
    opacity: 0.5;
    cursor: move;
}
</style>
<script type="text/javascript">
window.onload = function(e) {
    e = e || window.event;
    // startX, startY 为鼠标点击时初始坐标
    // diffX, diffY 为鼠标初始坐标与 box 左上角坐标之差，用于拖动
    var startX, startY, diffX, diffY;
    // 是否拖动，初始为 false
    var dragging = false;
          
    // 鼠标按下
    document.onmousedown = function(e) {
        startX = e.pageX;
        startY = e.pageY;
          
        // 如果鼠标在 box 上被按下
        if(e.target.className.match(/box/)) {
            // 允许拖动
            dragging = true;
          
            // 设置当前 box 的 id 为 moving_box
            if(document.getElementById("moving_box") !== null) {
                document.getElementById("moving_box").removeAttribute("id");
            }
            e.target.id = "moving_box";
          
            // 计算坐标差值
            diffX = startX - e.target.offsetLeft;
            diffY = startY - e.target.offsetTop;
        }
        else {
            // 在页面创建 box
            var active_box = document.createElement("div");
            active_box.id = "active_box";
            active_box.className = "box";
            active_box.style.top = startY + 'px';
            active_box.style.left = startX + 'px';
            document.body.appendChild(active_box);
            active_box = null;
        }
    };
           
    // 鼠标移动
    document.onmousemove = function(e) {
        // 更新 box 尺寸
        if(document.getElementById("active_box") !== null) {
            var ab = document.getElementById("active_box");
            ab.style.width = e.pageX - startX + 'px';
            ab.style.height = e.pageY - startY + 'px';
        }
           
        // 移动，更新 box 坐标
        if(document.getElementById("moving_box") !== null && dragging) {
            var mb = document.getElementById("moving_box");
            mb.style.top = e.pageY - diffY + 'px';
            mb.style.left = e.pageX - diffX + 'px';
        }
    };
           
    // 鼠标抬起
    document.onmouseup = function(e) {
        // 禁止拖动
        dragging = false;
        if(document.getElementById("active_box") !== null) {
            var ab = document.getElementById("active_box");
            ab.removeAttribute("id");
            // 如果<a href="https://www.baidu.com/s?wd=%E9%95%BF%E5%AE%BD&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dBP1n3PjTknAP9nH7hnvFW0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6K1TL0qnfK1TL0z5HD0IgF_5y9YIZ0lQzqlpA-bmyt8mh7GuZR8mvqVQL7dugPYpyq8Q1R1P16kPjn4Pf" target="_blank" class="baidu-highlight">长宽</a>均小于 3px，移除 box
            if(ab.offsetWidth < 3 || ab.offsetHeight < 3) {
                document.body.removeChild(ab);
            }
        }
    };
};
</script>
 
 
<p>点击鼠标左键并拖动绘制矩形</p>

Answer 2

绘制矩形：鼠标按下时得到起点，鼠标放开时得到终点，得到两个点之后计算点的关系然后绘制矩形，矩形可以用div来模拟，也就是鼠标放开之后创建一个div放到页面上，这样矩形就画好了；让矩形可以拖动那就是给div绑定相应的拖动函数即可。基本上就是这样了