1 <!DOCTYPE html>2 <html lang="es">3 <head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Plataforma Cloud</title>7 <style>8 /* Estilos previos... */9 .draggable-panel {10 width: 300px;11 height: 200px;12 background-color: #f9f9f9;13 border: 1px solid #ddd;14 position: absolute;15 padding: 10px;16 box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);17 }18 </style>19 <script>20 function makeDraggable(elem) {21 var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;22 23 elem.onmousedown = dragMouseDown;24 25 function dragMouseDown(e) {26 e = e || window.event;27 e.preventDefault();28 // Obtener la posición del cursor al inicio:29 pos3 = e.clientX;30 pos4 = e.clientY;31 document.onmouseup = closeDragElement;32 // Llamar a la función cada vez que se mueve el cursor:33 document.onmousemove = elementDrag;34 }35 36 function elementDrag(e) {37 e = e || window.event;38 e.preventDefault();39 // Calcular la nueva posición del cursor:40 pos1 = pos3 - e.clientX;41 pos2 = pos4 - e.clientY;42 pos3 = e.clientX;43 pos4 = e.clientY;44 // Establecer la nueva posición del elemento:45 elem.style.top = (elem.offsetTop - pos2) + "px";46 elem.style.left = (elem.offsetLeft - pos1) + "px";47 }48 49 function closeDragElement() {50 // Dejar de mover cuando se suelta el botón del ratón:51 document.onmouseup = null;52 document.onmousemove = null;53 }54 }55 </script>56 </head>57 <body>58 <!-- Barra de navegación y barra lateral aquí... -->59 60 <div class="content">61 <button onclick="openService('Database')">Base de Datos</button>62 <button onclick="openService('Logs')">Logs</button>63 <button onclick="openService('Lambdas')">Lambdas</button>64 <button onclick="openService('Queues')">Colas</button>65 </div>66 67 <script>68 function openService(serviceName) {69 // Crear un nuevo panel70 var panel = document.createElement("div");71 panel.className = "draggable-panel";72 panel.innerHTML = "<strong>" + serviceName + "</strong><p>Contenido de " + serviceName + "...</p>";73 document.body.appendChild(panel);74 makeDraggable(panel);75 }76 </script>77 </body>78 </html>Enlace
El enlace para compartir es: