菜单可拖动元素将新内容添加到页面主体

Question

我的目标是在页面左侧有一个菜单，右侧有一个空白div（称为#rightdiv）。 我想做拖动菜单元素，并将它们放到#rightdiv，这应该创建一个新的div与页面（网络应用程序）加载它 相对于拖动的元素，应该将div放置在#rightdiv，这最多4个元素。 应该可以删除一个div，调整其他div的大小。

这是我想要的截图。

很显然，我不指望一个解决方案，我问你，如果你知道的功能，图书馆或实例 ，可以帮助我找到了解决办法。

在此先感谢

Answer 1

还有谁允许你将它从一个div拖放到另外一个代码。

为了使元素可以调整大小，你可以使用jquery的.resizable()。

为了能够删除元素，必须点击这个按钮

$('.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'); 
 
    } 
 
    } 
 
})

.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; 
 
}

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

在元素上添加一个<button>和隐藏或删除元素，如果它不工作，该代码片段，转到This Jsfiddle，它完美地工作

Answer 2

如果要拖动的元素可调整大小，请使用.resizable()函数，使用此参数，如t他的。

​​