Estoy trabajando en un sitio web que utiliza el paquete Draggabilly de desandro. Me pregunto cómo puedo implementar un botón que agregará un nuevo elemento que se puede arrastrar. Mi método actual (que se muestra a continuación) crea lo que se puede arrastrar pero no permite que se arrastre.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Testing creating a button to add a draggable</title> <meta charset="UTF-8"> <meta name="viewpoint" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> </head> <body> <button id="addDragBtn">Add draggable</button> <script src="scripts.js"></script> </body> </html>CSS
body { font-family: sans-serif; } .draggable { width: 140px; height: 140px; background: #F90; border-radius: 10px; cursor: move; } .draggable.is-pointer-down { background: #09F; } .draggable.is-dragging { opacity: 0.7; }JavaScript
let $draggable = $('.draggable').draggabilly(); function addDrag() { var div = document.createElement('div'); div.className = "draggable"; document.body.appendChild(div); }; let btn = document.getElementById("addDragBtn"); addDragBtn.addEventListener( 'click', event => { addDrag(); } );