菜单可拖动元素，用于向页面主体添加新内容

Question

我的目标是在左侧有一个带侧边菜单的页面，在右边有一个空div（称之为#rightdiv）。 我想拖动菜单元素并将它们放到#rightdiv中，这应该创建一个新的div，其上加载了一个页面（web app） 相对于拖动的元素，应该在#rightdiv中定位div，最多4个元素。 应该可以删除div，调整其他div的大小。

这是我想要的截图。

显然我不希望有解决方案，我问你是否了解功能，库或示例 这可以帮助我找到解决方案。

提前致谢

Answer 1

有一个代码允许您从div拖放到另一个。

要使元素可调整大小，可以使用jquery中的.resizable()。

为了能够删除元素，您必须在元素上添加<button>并在单击此按钮时隐藏或删除元素

＆＃13;

＆＃13;

$('.draggable').draggable({
  helper: "clone",
});


$('#diagramZone').droppable({
  accept: ".startEventClass, .userTaskClass, .endEventClass",
  drop: function(e, ui) {
    dragE1 = ui.helper.clone();
    dragE1.draggable({
      containment: "#diagramZone",
    });
    $(dragE1).removeClass("startEventClass");
    $(dragE1).addClass("startEventClass");
    if (ui.draggable[0].id) {
      dragE1.appendTo('#diagramZone');
    }
  }
})

＆＃13;

.startEventClass {
  width: 40px;
  height: 40px;
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 30px;
  border: solid 2px;
  border-radius: 50px;
}

.userTaskClass {
  width: 120px;
  height: 60px;
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 30px;
  border: solid 2px;
  border-radius: 5px;
}

.endEventClass {
  width: 40px;
  height: 40px;
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 30px;
  border: solid 5px;
  border-radius: 50px;
}

#diagramZone {
  height: 200px;
  border: solid 1px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="startEvent" class="draggable startEventClass">

</div>

<div id="userTask" class="draggable userTaskClass"></div>

<div id="endEvent" class="draggable endEventClass"></div>

<div id="diagramZone" class="col-md-8" id="diagramZone">
</div>

＆＃13;

＆＃13;

＆＃13;

如果它不在代码段中工作，请转到This Jsfiddle，它运作正常

Answer 2

如果您希望拖动的元素可以调整大小，请使用带有此参数的.resizable()函数，如下所示。

$('#startEvent').resizable({
      helper: "ui-resizable-helper",
      animate: true,
      ghost: true,
      aspectRatio:true  
    });