Minimal JS Library For Handling Drag And Drop Events – Draggyjs

Category: Drag & Drop , Javascript | December 24, 2021
Author:ManuTheCoder
Views Total:67 views
Official Page:Go to website
Last Update:December 24, 2021
License:MIT

Preview:

Minimal JS Library For Handling Drag And Drop Events – Draggyjs

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
}

You Might Be Interested In:


Leave a Reply