click & drag to create a div with its own size - html

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>