I am working on a website which uses desandro's package Draggabilly. I am wondering how I can implement a button which will add a new working draggable. My current method (shown below) creates the draggable but does not allow it to drag.
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();
}
);