Minimal JS Library For Handling Drag And Drop Events – Draggyjs

Preview:

Description:

Draggyjs is a tiny JavaScript library for handling drag and drop events on the webpage.

The library comes with built-in support for dragging items between different containers so you don’t have to worry about compatibility issues when using another plugin like jQuery UI Draggable. There are no dependencies on other libraries so all you need is this one file!

How to use it:

1. Download and import the draggy.js library into the document.

<script src="./src/draggy.js"></script>

2. Attach the drag and drop functionality to an element and specify the target drop zone as follows:

<div class="drag" id="drag.1">Drag Me</div>
<div class="drag:container" id="drag.container.1"></div>

new Draggy({
    element: document.getElementById("drag.1"),
    container: document.getElementById("drag.container.1"),
    containerHoverClass: "drag:container:hover",
});

3. Callback functions.

new Draggy({
    element: document.getElementById("drag.1"),
    container: document.getElementById("drag.container.1"),
    containerHoverClass: "drag:container:hover",
    options: {
      callbacks: {
        DragStart(el) {
          console.log("Drag start");
        },
        DragEnd(el) {
          console.log("Drag end");
        },
        DragOver() {
          console.log("Drag over");
        },
        DragEnter(el) {
          console.log("Drag enter");
        },
        DragLeave(el) {
          console.log("Drag leave");
        },
        DragSuccess(el) {
          console.log(el.id)
          console.log("Success!");
        },
      },
    },
});

4. The example CSS styles.

.drag {
  pointer-events: auto;
  padding: 10px;
  border: 2px solid #aaa;
  opacity: 1;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  cursor: grab;
}
.drag\:container {
  padding: 15px 10px;
  width:100%;
  border: 1px solid #aaa;
  border-radius: 3px;
  margin-top: 50px;
  box-shadow: 0 0 50px #ccc
}
.drag\:container\:hover {
  background:#ddd;
  border-color:#404040
}