Native elementFromPoint Drag & Drop Library – allonsh.js

allonsh.js is a lightweight JavaScript library that enables you to implement drag and drop functionality using native elementFromPoint detection.

This native browser method provides accurate element detection during drag operations without the overhead of complex collision detection algorithms or DOM traversal logic that other libraries often require.

Features:

• Zero Dependencies: Completely standalone with no external library requirements.
• Modern Browser Support:
  Sponsored
  Works reliably in browsers that support Pointer Events.
• Automatic Viewport Scrolling: Handles edge scrolling when dragging near viewport boundaries.
• Custom Event System: Provides allonsh-dragstart, allonsh-dragover, and allonsh-drop events for interaction handling.
• Snap-to-Center Option: Built-in functionality to automatically center elements within drop zones.

How to use it:

1. Define the elements you want to drag and the areas where you can drop them.

<div class="draggable">Drag me</div>
<div class="dropzone" id="dropzone">Drop here</div>

2. Import the library and initialize it by passing a CSS selector for your draggable elements.

import Allonsh from './src/allonsh.js';
const allonsh = new Allonsh('.draggable');

3. The library works by dispatching custom events. You listen for these events on your dropzone elements to control the behavior.

const dropzone = document.getElementById('dropzone');

// Add a class when an element is dragged over the dropzone
dropzone.addEventListener('allonsh-dragover', () => {
  dropzone.classList.add('dragover');
});

// Handle the drop event
dropzone.addEventListener('allonsh-drop', (e) => {
  dropzone.classList.remove('dragover');
  console.log('Dropped ' + e.detail.draggedEl.textContent + ' into the dropzone!');
  // You can add custom logic here, like snapping the element
  const rect = dropzone.getBoundingClientRect();
  e.detail.draggedEl.style.left = rect.left + rect.width / 2 - 50 + 'px';
  e.detail.draggedEl.style.top = rect.top + rect.height / 2 - 50 + 'px';
});

// Clean up styles when a drag operation starts anywhere on the page
document.addEventListener('allonsh-dragstart', () => {
  dropzone.classList.remove('dragover');
});

4. API methods.

• registerDropzone(selector, onDrop): Registers a dropzone with optional drop handler callback.
• enableSnapToCenter(boolean): Enables or disables automatic snap-to-center behavior on drop.

5. Event handlers.

• allonsh-dragstart: Fired on the dragged element when the drag operation begins.
• allonsh-dragover: Fired on the element currently underneath the cursor during a drag.
• allonsh-drop: Fired on the element where the dragged element is dropped. The event detail object contains the draggedEl.

FAQs

Q: Does allonsh.js work on mobile devices?
A: The library currently uses mouse events, so it doesn’t work on touch devices. You’d need to implement touch event handlers separately or use a different library for mobile drag and drop functionality.

Q: Can I drag elements between different containers or iframes?
A: Elements can be dragged between any containers within the same document. Cross-iframe dragging isn’t supported since elementFromPoint doesn’t work across frame boundaries.

Q: How do I prevent certain elements from being drop targets?
A: Since drop detection uses elementFromPoint, you can prevent drops by not adding event listeners to those elements or by checking the element type in your event handlers before processing the drop.

Q: What happens if I have overlapping drop zones?
A: The library will detect whichever element is topmost in the DOM stacking order at the cursor position. You can control this behavior using CSS z-index values on your drop zones.

Q: How does allonsh.js compare to the native HTML5 Drag and Drop API?
A: It offers a simpler, more predictable developer experience. You work with standard custom events and have full control over the element’s appearance during the drag. The native API can be quirky and less intuitive.

The post Native elementFromPoint Drag & Drop Library – allonsh.js appeared first on CSS Script.