title: Can I use Jquery UI to drop into Konva (Kineticjs) stage and save to JSON string?
body: <p>I'm trying to create a drag and drop tool using Jquery UI to drop rooms of a house into a Konva stage and then save that stage as a JSON string.</p>
  
  <p>Here is the JSFiddle: <a href="http://jsfiddle.net/RossWilliams94/cxzhabgL/4/" rel="nofollow">http://jsfiddle.net/RossWilliams94/cxzhabgL/4/</a></p>
  
  <pre><code>function dragDrop(e, ui) {
      // get the drop point
      var x = parseInt(ui.offset.left - offsetX, 10);
      var y = parseInt(ui.offset.top - offsetY, 10);
  
      // get the drop payload (here the payload is the image)
      var element = ui.draggable;
      var data = element.data("url");
      //var theImage = document.getElementById('bedroom');
      var theImage = element.data("image");
      // create a new Konva.Image at the drop point
      // be sure to adjust for any border width (here border==1)
      var image = new Konva.Image({
          name: data,
          x: x,
          y: y,
          image: theImage,
          draggable: true
      });
  
      image.on('dblclick', function() {
          image.remove();
          layer.draw();
      });
  
      var $clone = ui.helper.clone();
      // all clones are draggable
      // if clone is shape then draggable + resizable
      if (!$clone.is('.inside-droppable')) {
          $(this).append($clone.addClass('inside-droppable').draggable({
              containment: $stageContainer,
              tolerance: 'fit',
              cursor: 'pointer',
              position: 'relative',
              snap: true,
              snapTolerance: 15
          }));
  
          if ($clone.is(".imag") === false) {
              $clone.resizable({
                  containment: $stageContainer
              });
          }
          $clone.on('dblclick', function () {
              $clone.remove();
              layer.draw();
          });
          $clone.css({top: y, left: x, position:'absolute'});
      }
  
  
      json = stage.toJSON();
      group.add(image);
      layer.add(group);
      stage.add(layer);
  </code></pre>
  
  <p>}</p>
  
  <p>However the problem I have run into is that as you can see from the JSFiddle when I click the save button it doesn't save the rooms dropped in from the JQuery UI only the background and label.</p>
  
  <p>Is it actually possible to accomplish this? Or is it because I'm using Jquery UI with Konva which creates the problems?</p>
  
  <p>Thanks.</p>