菜單可拖動元素將新內容添加到頁面主體

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他的。

​​