Drag n drop floorplanner

We sell furniture online. We want the ability to allows customers to specify their floor dimensions and then drag/drop our sofas onto their floorplan to see how much space our sofas/tables take up.
I dont want anything complicated, just a rectangle that the user specifies the dimensions of, and can then drag up to 10 shapes (our range of sofas/tables) into the rectangle.
How can this be done? Has someone done similar before?

1 Like

Not really my area but I’ve seen this script mentioned a few times.

It sounds like something you could build for yourself if you kept it simple.

There are some floor planner scripts around but they look a little more involved than you need.


I can’t do drag and drop, don’t know what you want to drag.
Can do floor space creation


<html lang="en">

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>The floor plan</title>

<link rel="stylesheet" href="screen.css" media="screen">


 <h1>create floor plan</h1>

 <form action='#'>
   <legend>Room Dimensions</legend>
   <label><span>Enter width:</span>
    <input id="wth" type="number" min="10" max="100" required>
   <label><span>Enter height:</span>
    <input id="hgt" type="number" min="10" max="100" required>
   <input type="submit" value="create room">
   <input type="reset">

 <div id="container"></div>

 <script src="create-floor-plan.js"></script>



* {
   box-sizing: border-box;
body {
    padding-bottom: 2em;
    background-color: #f9f9f9;
    font: normal 1em / 1.5 arial,helvetica, sans-serif;
h1 {
    font-size: 1.5em;
    font-weight: normal;
    color: #444;
    text-align: center;
form { 
   display: block;
   width: 16em;
   padding: 1em;
   margin: auto;
   border: 1px solid #999;
   border-radius: 1em;
fieldset {
   border: 0;
   text-align: center;   
fieldset:first-of-type {
   display: flex;
   flex-direction: column; 
fieldset:last-of-type input{
    padding: 0.5em 0.75em;
    margin: 0 0.5em;
label span, label input{
   display: inline-block;
   width: 6em;
   text-align: left;
#room {
   border: 2px solid #000; 
   background-color: #eef;
   background-image: url( https://i.postimg.cc/ZqqnXnQv/border.png );
   margin: 1em auto;


(function( d ) {

   var room, cont = d.querySelector( '#container');

   d.querySelector( 'form' ).addEventListener( 'submit',
      if( cont.firstChild ) {
          cont.removeChild( room ); 
       room = d.createElement( 'div' );
       room.setAttribute( 'id', 'room' );
       room.setAttribute( 'style', 'width:' + d.querySelector('#wth').value*10+'px;'+
                                   'height:' + d.querySelector('#hgt').value*10+'px' );
       cont.appendChild( room );},false );

   d.querySelector( 'input[type="reset"]').addEventListener( 'click',
      if( cont.firstChild ) {
          cont.removeChild( room );
   },false );
}( document ));

Thankyou! Ill try this later. :slight_smile:

1 Like

HI @snadyleiby . I really like your floor generator.

Ive settled on https://gridstackjs.com/ as the drag/drop jquery library. Im getting my head around how it works.

But I wonder how I can amalgamate your code with gridstackjs?

1 Like