Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Simple BPM Canvas</title>
- <style>
- body {
- font-family: Arial, sans-serif;
- margin: 0;
- }
- .left-panel {
- width: 100px;
- background-color: #f0f0f0;
- padding: 10px;
- float: left;
- }
- .toolbar {
- margin-bottom: 10px;
- }
- .toolbar div {
- width: 80px;
- height: 30px;
- border: 1px solid #ccc;
- background-color: #fff;
- margin-bottom: 10px;
- text-align: center;
- line-height: 30px;
- cursor: pointer;
- }
- .canvas {
- width: 800px;
- height: 400px;
- margin: 20px auto;
- border: 1px solid #ccc;
- background-color: #f9f9f9;
- }
- .bpm-element {
- position: absolute;
- background-color: #b3e0ff;
- border: 1px solid #007fff;
- padding: 5px;
- cursor: pointer;
- }
- </style>
- </head>
- <body>
- <div class="left-panel">
- <div class="toolbar">
- <div class="start-event" draggable="true" ondragstart="onDragStart(event)">Start</div>
- <div class="task" draggable="true" ondragstart="onDragStart(event)">Task 1</div>
- <div class="end-event" draggable="true" ondragstart="onDragStart(event)">End</div>
- </div>
- </div>
- <div class="canvas" id="canvas" ondrop="onDrop(event)" ondragover="onDragOver(event)"></div>
- <script>
- function onDragStart(event) {
- event.dataTransfer.setData("text/plain", event.target.innerText);
- }
- function onDrop(event) {
- event.preventDefault();
- var data = event.dataTransfer.getData("text/plain");
- var bpmElement = document.createElement('div');
- bpmElement.classList.add('bpm-element');
- bpmElement.innerText = data;
- bpmElement.style.left = (event.clientX - event.target.offsetLeft) + 'px';
- bpmElement.style.top = (event.clientY - event.target.offsetTop) + 'px';
- event.target.appendChild(bpmElement);
- }
- function onDragOver(event) {
- event.preventDefault();
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement