How can I drag and drop different shapes in custom div

Users
1

Here I kept all the shapes which I required into a div, Now I when I drag and drop a shape into the diagram div, It should be appear there and when we click on that should show same options like which next diagram we want to add and so and so. I tried but not working and not found any reference related to my requirement.

<html>
<head>
    <title></title>
      <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  	<link rel="stylesheet" href="https://unpkg.com/bpmn-js@6.1.1/dist/assets/diagram-js.css">
    <link rel="stylesheet" href="https://unpkg.com/bpmn-js@6.1.1/dist/assets/bpmn-font/css/bpmn.css">

    <!-- modeler distro -->
    <script src="https://unpkg.com/bpmn-js/dist/bpmn-viewer.development.js"></script>
    <title>Scratch BPMN</title>

    <!-- needed for this example only -->
    <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>

    <!-- example styles -->
    <style>
    </style>
</head>
<body class="canvas">
	<h3>Diagram</h3>
	 <div class="scrollable">
        <div id="splitter" class="diagram-wrapper col-sm-12">
            <div class="row">
                <div id="left-pane" class="col-sm-2">
                    <div class="djs-container" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
				<div class="djs-palette two-column open" style="touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
					<div class="djs-palette-entries">
						<div class="group" data-group="tools">
							<div class="entry bpmn-icon-hand-tool" draggable="true" data-action="hand-tool" title="Activate the hand tool">
							</div>

							<div class="entry bpmn-icon-lasso-tool" draggable="true" data-action="lasso-tool" title="Activate the lasso tool">		
							</div>

							<div class="entry bpmn-icon-space-tool" draggable="true" data-action="space-tool" title="Activate the create/remove space tool">
							</div>

							<div class="entry bpmn-icon-connection-multi" draggable="true" data-action="global-connect-tool" title="Activate the global connect tool">
							</div>

							<hr class="separator">
						</div>

						<div class="group" data-group="event">
							<div class="entry bpmn-icon-start-event-none" draggable="true" data-action="create.start-event" title="Create StartEvent">	
							</div>

							<div class="entry bpmn-icon-intermediate-event-none" draggable="true" data-action="create.intermediate-event" title="Create Intermediate/Boundary Event">
							</div>

							<div class="entry bpmn-icon-end-event-none" draggable="true" data-action="create.end-event" title="Create EndEvent">
							</div>
						</div>

						<div class="group" data-group="gateway">
							<div class="entry bpmn-icon-gateway-none" draggable="true" data-action="create.exclusive-gateway" title="Create Gateway">
							</div>
						</div>

						<div class="group" data-group="activity">
							<div class="entry bpmn-icon-task" draggable="true" data-action="create.task" title="Create Task">
							</div>

							<div class="entry bpmn-icon-subprocess-expanded" draggable="true" data-action="create.subprocess-expanded" title="Create expanded SubProcess">
							</div>
						</div>

						<div class="group" data-group="data-object">
							<div class="entry bpmn-icon-data-object" draggable="true" data-action="create.data-object" title="Create DataObjectReference">
							</div>
						</div>

						<div class="group" data-group="data-store">
							<div class="entry bpmn-icon-data-store" draggable="true" data-action="create.data-store" title="Create DataStoreReference">
							</div>
						</div>

						<div class="group" data-group="collaboration">
							<div class="entry bpmn-icon-participant" draggable="true" data-action="create.participant-expanded" title="Create Pool/Participant">
							</div>
						</div>

						<div class="group" data-group="artifact">
							<div class="entry bpmn-icon-group" draggable="true" data-action="create.group" title="Create Group">
							</div>
						</div>
					</div>
				</div>
			</div>
        	</div>
                <div id="center-pane" class="col-sm-10">
                    <div class="pane-content">
                        <div id="diagram" style="height: 800px; width : 1000px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
2

See here: How can I drag and drop different shape of bpmn in custom div.?