Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const tools = document.querySelectorAll('.tool');
+ const canvas = document.getElementById('canvas');
+ let draggedElement = null;
+
+ tools.forEach(tool => {
+ tool.addEventListener('dragstart', handleDragStart);
+ tool.addEventListener('dragend', handleDragEnd);
+ });
+
+ canvas.addEventListener('dragover', handleDragOver);
+ canvas.addEventListener('drop', handleDrop);
+
+ function handleDragStart(e) {
+ draggedElement = this;
+ this.style.opacity = '0.4';
+ e.dataTransfer.setData('text/plain', this.dataset.type);
+ }
+
+ function handleDragEnd(e) {
+ this.style.opacity = '1';
+ }
+
+ function handleDragOver(e) {
+ e.preventDefault();
+ e.dataTransfer.dropEffect = 'copy';
+ }
+
+ function handleDrop(e) {
+ e.preventDefault();
+ const type = e.dataTransfer.getData('text/plain');
+
+ const placeholder = canvas.querySelector('.placeholder');
+ if (placeholder) {
+ placeholder.remove();
+ }
+
+ const element = createFlowElement(type, e.clientX, e.clientY);
+ canvas.appendChild(element);
+ }
+
+ function createFlowElement(type, x, y) {
+ const element = document.createElement('div');
+ element.className = 'flow-element glass';
+ element.style.cssText = `
+ position: absolute;
+ left: ${x - canvas.getBoundingClientRect().left}px;
+ top: ${y - canvas.getBoundingClientRect().top}px;
+ padding: 1rem;
+ cursor: move;
+ min-width: 100px;
+ min-height: 100px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ `;
+
+ const icon = document.createElement('i');
+ icon.className = 'icon';
+ switch(type) {
+ case 'image': icon.textContent = '🖼️'; break;
+ case 'video': icon.textContent = '🎥'; break;
+ case 'audio': icon.textContent = '🎵'; break;
+ case 'text': icon.textContent = '📝'; break;
+ }
+
+ element.appendChild(icon);
+ makeElementDraggable(element);
+
+ return element;
+ }
+
+ function makeElementDraggable(element) {
+ let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+
+ element.onmousedown = dragMouseDown;
+
+ function dragMouseDown(e) {
+ e.preventDefault();
+ pos3 = e.clientX;
+ pos4 = e.clientY;
+ document.onmouseup = closeDragElement;
+ document.onmousemove = elementDrag;
+ }
+
+ function elementDrag(e) {
+ e.preventDefault();
+ pos1 = pos3 - e.clientX;
+ pos2 = pos4 - e.clientY;
+ pos3 = e.clientX;
+ pos4 = e.clientY;
+
+ element.style.top = (element.offsetTop - pos2) + "px";
+ element.style.left = (element.offsetLeft - pos1) + "px";
+ }
+
+ function closeDragElement() {
+ document.onmouseup = null;
+ document.onmousemove = null;
+ }
+ }
+ });
