Drag n drop floorplanner

JavaScript
1

Hi
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?
Thanks

1 Like
2

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.

2 Likes
3

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

index.html

<!DOCTYPE HTML>
<html lang="en">
<head>

<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">

</head>
<body>

 <h1>create floor plan</h1>

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

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

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

</body>
</html>

screen.css

* {
   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;
 }

create-floor-plan.js

(function( d ) {

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

   d.querySelector( 'form' ).addEventListener( 'submit',
   function(e){
     e.preventDefault();
      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',
   function(){
      if( cont.firstChild ) {
          cont.removeChild( room );
       }
   },false );
}( document ));
4

Thankyou! Ill try this later. :slight_smile:

1 Like
5

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