click & drag to create a div with its own size

Question

I'd like to know if you have any idea on how I could click and drag on a canva to create a div. Like in a video-game where you drag & drop to create an area.

Is there any plugin or things that were made in order to achieve that?

Thanks for your replies.

Answer 1

Building on Ludwig's snippet ... this will draw some squares on the page using mousedown and mouseup event listeners :)

EDIT: Had too much fun playing with this so here is an updated version with a select box to help you draw the selection, and now working in all directions :) I'd still recommend using a library like this one (https://github.com/Simonwep/selection) though, especially if you want touchscreen support.

// declare some global variables
let showSelection = false;
let Xstart;
let Ystart;

$(document).ready(function(){

    $(document).mousedown(function(event){
        // set a variable that indicates the user is drawing a selection
        showSelection=true;

        // save the position where the mouse click started
        Xstart=event.pageX;
        Ystart=event.pageY;

        // create the select box element and give it some starting positions
        $('<div id="selection"></div>')
            .css({
                "left": Xstart + 'px',
                "top": Ystart + 'px',
            })
        .appendTo(document.body);
    });

    $(document).mousemove(function(event){
        
        // if we are making a selection lets keep updating our select box dimensions
        if(showSelection == true) {
            
            // horizontal selection
            if (event.pageX > Xstart) {
                // left to right
                $('#selection').css({
                    "width": event.pageX-Xstart + 'px'
                })
            } else {
                // right to left
                $('#selection').css({
                    "left": event.pageX,
                    "width": Xstart-event.pageX + 'px'
                })
            }

            // vertical selection
            if (event.pageY > Ystart) {
                // top to bottom
                $('#selection').css({
                    "height": event.pageY-Ystart + 'px'
                })
            } else {
                // bottom to top
                $('#selection').css({
                    "top": event.pageY,
                    "height": Ystart-event.pageY + 'px'
                })
            }
        }

    });

    $(document).mouseup(function(event){

        // we can borrow the needed values from the #selection element to draw our 'area' :)
        LeftVal = $("#selection").css('left')
        TopVal = $("#selection").css('top')
        WidthVal = $("#selection").css('width')
        HeightVal = $("#selection").css('height')

        // create the area element and give it the dimensions
        $('<div class="area"></div>')
            .css({
                "left": LeftVal,
                "top": TopVal,
                "width": WidthVal,
                "height": HeightVal
            })
            .appendTo(document.body);
        
        // get rid of the selection element from the DOM
        $( "#selection" ).remove();
        // and set our showSelection variable back to false
        showSelection=false;

    });
});

.area {
    position: absolute;
    background-color:lightgray;
}

#selection {
    position: absolute;
    background-color: lightblue;
    border: 2px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

You could use this: https://simonwep.github.io/selection/

In combination with something like this:

$(document).ready(function(){
    $(document).click(function(event){
        $('<div id="kenobi">Hello there</div>')
            .css({
                "left": event.pageX + 'px',
                "top": event.pageY + 'px'
            })
      .appendTo(document.body);
    });
});

body {
    position: relative;
}

#kenobi {
    position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>