Javascript 为餐厅建立动态布局

我正在使用jquery开发画布，并且我能够从工具箱到实际画布只获取一种图像（即从工具箱到画布拖放一种图像）。我想在工具箱中添加更多的输入，如门、桌子、椅子等，并想将其用于拖放操作

这是我当前的代码，它只接受工具栏中的一个输入。我希望工具栏中有多个选项，画布中的拖放功能也有相同的选项

// get a reference to the house icon in the toolbar
// hide the icon until its image has loaded
var $house=$("#house");
$house.hide();

// get the offset position of the kinetic container
var $stageContainer=$("#container");
var stageOffset=$stageContainer.offset();
var offsetX=stageOffset.left;
var offsetY=stageOffset.top;

// create the Kinetic.Stage and layer
var stage = new Kinetic.Stage({
  container: 'container',
  width: 350,
  height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);

// start loading the image used in the draggable toolbar element
// this image will be used in a new Kinetic.Image
var image1=new Image();
image1.onload=function(){
  $house.show();
}
image1.src="https://dl.dropboxusercontent.com/u/139992952/multple/4top.png";

// make the toolbar image draggable
$house.draggable({
  helper:'clone',
});

// set the data payload
$house.data("url","house.png"); // key-value pair
$house.data("width","32"); // key-value pair
$house.data("height","33"); // key-value pair
$house.data("image",image1); // key-value pair

// make the Kinetic Container a dropzone
$stageContainer.droppable({
  drop:dragDrop,
});

// handle a drop into the Kinetic container
function dragDrop(e,ui){

  // get the drop point
  var x=parseInt(ui.offset.left-offsetX);
  var y=parseInt(ui.offset.top-offsetY);

  // get the drop payload (here the payload is the image)
  var element=ui.draggable;
  var data=element.data("url");
  var theImage=element.data("image");

  // create a new Kinetic.Image at the drop point
  // be sure to adjust for any border width (here border==1)
  var image = new Kinetic.Image({
    name:data,
    x:x,
    y:y,
    image:theImage,
    draggable: true
  });
  layer.add(image);
  layer.draw();
}
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
#toolbar{
  width:350px;
  height:35px;
  border:solid 1px blue;
}
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>

<h4>Drag from toolbar onto canvas. Then drag around canvas.</h4>
<div id="toolbar">
  <img id="house" width=32 height=32 src="https://dl.dropboxusercontent.com/u/139992952/multple/4top.png"><br>
</div>
<div id="container"></div>

//获取对工具栏中房屋图标的引用
//隐藏图标，直到其图像已加载
var$house=$（“#house”）；
$house.hide（）；
//获取动态容器的偏移位置
变量$stageContainer=$（“#容器”）；
var stageOffset=$stageContainer.offset（）；
var offsetX=stageOffset.left；
var offsetY=stageOffset.top；
//创造动感舞台和层次
var阶段=新的动力学阶段({
容器：'容器'，
宽度：350，
身高：350
});
var layer=新的动能层（）；
阶段。添加（层）；
//开始加载可拖动工具栏元素中使用的图像
//此图像将用于新的动能图像
var image1=新图像（）；
image1.onload=函数（）{
$house.show（）；
}
图1.src=”https://dl.dropboxusercontent.com/u/139992952/multple/4top.png";
//使工具栏图像可拖动
$house.draggable({
助手：'clone'，
});
//设置数据有效负载
$house.data（“url”、“house.png”）；//键值对
$house.data（“宽度”、“32”）；//键值对
$house.数据（“高度”、“33”）；//键值对
$house.data（“图像”，图像1）；//键值对
//使动能容器成为dropzone
$stageContainer.droppable({
下降：dragDrop，
});
//将液滴放入容器中
函数dragDrop（e，ui）{
//抓住落点
var x=parseInt（ui.offset.left offsetX）；
var y=parseInt（ui.offset.top-offsetY）；
//获取下降有效载荷（此处有效载荷为图像）
var元素=ui.draggable；
var数据=元素数据（“url”）；
var theImage=element.data（“图像”）；
//在下降点创建一个新的动能图像
//确保调整任何边框宽度（此处边框==1）
var image=新的动能图像({
名称:数据,，
x:x，
y:y，
图片：theImage，
德拉格布尔：是的
});
图层。添加（图像）；
layer.draw（）；
}
正文{padding:20px；}
#容器{
边框：实心1px#ccc；
边缘顶部：10px；
宽度：350px；
高度：350px；
}
#工具栏{
宽度：350px；
高度：35px；
边框：纯色1px蓝色；
}
从工具栏拖到画布上。然后在画布上拖动。