Upload an image file and display the page using javascript to immediately implement the mouse to drag a rectangular frame animation and achieve easily drag within a fixed area

 

 

First of all, you have to design a good mouse event handler method, mainly left-click, release the left button, move the mouse as well as a method
Second, to understand what content the way, draw a rectangle, a design method: DrawRectgle (upper left corner, lower right corner ), and to determine when this method is called, put the already-drawn rectangle removed (or is based on the upper left, lower right coordinates, resize the rectangle, so, do not remove the original rectangle)

In the left mouse button down event, get the mouse position, save for the left corner, draw a rectangle to set the start of a flag
in the left mouse button pop-up event, the recovery plan rectangular flag is false
in mouse motion events, it is necessary to determine whether the same time also press the left mouse button, if pressed, and draw a rectangle flag is true, you get the mouse position, save for the lower right corner coordinates (for moving the mouse to the left on occasion, take the upper left, lower right position to exchange ), and then draw a rectangle

// css部分
#canvas {
        background-color: #AAAAAA;
        position: relative;
        background-size:100% 100%;
        border: 2px solid blue;
    }
 
#canvas>div {
        border: 2px solid green;
        position: absolute;
        background-color: #eaeaea;
    }
#canvas>div>span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: simsun;
        font-size: 9pt;
    }
 
 
// html部分
<div id="canvas" style= "width: 850px; height: 477px" > </ div > 
 
// JS portion 
var canvasWidth = 850; 
var canvasHeight = 477; 
var = allDivNum. 1; 
CanvasExt = { 
        the drawRect: function (Canvas) {// Parameters canvas-- block material painted area 
            var = that the this; 
 
            // Canvas rectangular frame 
            var canvasRect = canvas.getBoundingClientRect (); 
            upper-left coordinates of the rectangular frame // 
            var canvasLeft = canvasRect.left; 
            var = canvasTop canvasRect.top; 
            var X 0 =; 
            var Y = 0; 
 
            // press a mouse click event, drawing ready 
            $ (document) .on ( 'mousedown ', '#canvas', function (e) {
                // boxes and other material already exists solving modify, delete and then there is the new id duplication ' + id,{
                    actions: [{ 
                var date = new Date () getTime ().;
                ID = var "newDiv" + DATE + the parseInt (Math.random () * 10); 
                
                var divEle = ""; 
                // XY placement of the mouse 
                X = e.clientX - canvasLeft; 
                Y = e.clientY - canvasTop; 
                
                // Create div 
                divEle = document.createElement ( 'div'); 
                divEle.setAttribute ( "ID", ID); 
 
                canvas.append (divEle) 
                divEle.style.top = Y + "PX"; 
                divEle.style.left = + X "PX"; 
                
                // bind deletion 
                var = MENU new new BootstrapMenu ( '#' + ID, { 
                        name: "delete block shows'
                        onClick: function() {
                            del (ID); 
                        } 
                    }] 
                }); 
                var TX = 0; 
                var TY = 0; 
                var TWIDTH = 0; 
                var theight = 0; 
 
                // add drag operation 
                divEle.onmousedown = function (E) { 
                    e.stopPropagation ( ); // time to prevent bubbling 
                    var divEleRect this.getBoundingClientRect = (); 
                    var = e.clientX divEleLeft - divEleRect.left; 
                    var = e.clientY divEleTop - divEleRect.top; 
                     
                    this.onmousemove = function (e) {
                        e.stopPropagation (); 
                        TX = e.clientX - canvasLeft - divEleLeft; 
                        TY = e.clientY - canvasTop - divEleTop; 
                        // retrieve the current width and height of the object 
                        TWIDTH = document.getElementById (ID) through .style.width,; 
                        TWIDTH the parseInt = (TWIDTH); 
                        theight = document.getElementById (ID) .style.height; 
                        theight = the parseInt (theight); 
                        // boundary detector 
                        IF (TX < = 0 ) { 
                            TX = 0;
                             this.style.left = 0 + "PX";
                        } else if(tx + twidth > canvasWidth) {
                            tx = canvasWidth - twidth;
                            this.style.left = (canvasWidth - twidth) + "px";
                        } else {
                            this.style.left = tx + "px";
                        }
                        if(ty <= 0) {
                            ty = 0;
                            this.style.top = 0 + "px";
                        } else if((ty + theight) > canvasHeight) {
                            y = canvasHeight - theight;
                            this.style.top = (canvasHeight - theight) + "px";
                        The else {} 
                            this.style.top + TY = "PX"; 
                        } 
                    } 
                    this.onmouseup = function (E) { 
                        var ID = $ (the this) .attr ( "ID"); 
                        e.stopPropagation (); 
                        this.onmousemove null =; 
                    } 
                }; 
 
                // mouse move events, drawing 
                var width = 0; 
                var height = 0; 
                canvas.onmousemove = function (E) {
                    e.stopPropagation();
                    // width height difference is at the end of mouse movement from the starting position of the mouse 
                    width = e.clientX - canvasLeft - X;
                    = e.clientY height - canvasTop - Y; 
                    divEle.style.width + width = "PX"; 
                    divEle.style.height + height = "PX"; 
                    
                    var = e.clientX TW - canvasLeft; 
                    var e.clientY = TH - canvasTop; 
                    IF (TW> = (the parseInt (canvasWidth) -7) || TH> =              
                             (the parseInt (canvasHeight) -7)) {// less than canvas 3px, for ease of Analyzing 
                        
                            allDivNum ++; 
                            divEle.innerHTML = " < span > creative block "allDivNum + +" </ span > "; 
                        Canvas.onmousemove = null;
                        canvas.onmouseup = null;
                        return;
                    }
                }
                canvas.onmouseup = function(e) {
                    if(width < 10 || height < 10) {
                        canvas.removeChild(divEle);
                    } else {
                        allDivNum++;
                        divEle.innerHTML = "<span>素材框" + allDivNum + "</span>";
                    }
                    e.stopPropagation();
                    canvas.onmousemove = null;
                } 
            }); 
 
        } 
    };
= function the window.onload () { 
        var Canvas = document.getElementById ( "Canvas"); 
        CanvasExt.drawRect (Canvas); 
        // cancel the default right click event 
        document.oncontextmenu = function (E) { 
            e.preventDefault (); 
        } 
    };

 

----------------
Disclaimer: This article is CSDN blogger "tangdou369098655 'original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement. .
Original link: https: //blog.csdn.net/tangdou369098655/article/details/100677663