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

Developers
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

Hello,

Please have a look at here to see how to create a custom palette. Using HTML draggable property does not mean anything for our toolkit, as we use SVG/Canvas API. You need to attach the bpmn-js modeler to an element first. In your example I see you’re importing a bpmn-js viewer instead. I’d suggest starting by reading here.