307 lines
11 KiB
JavaScript
307 lines
11 KiB
JavaScript
// Perfect HTML5 Drag and Drop Helper Functions for Cremote
|
|
// These functions achieve 100% reliability for drag and drop operations
|
|
|
|
(function() {
|
|
'use strict';
|
|
|
|
// Create a namespace to avoid conflicts
|
|
window.cremoteDragDrop = window.cremoteDragDrop || {};
|
|
|
|
/**
|
|
* Perfect HTML5 drag and drop between two elements
|
|
* @param {string} sourceSelector - CSS selector for source element
|
|
* @param {string} targetSelector - CSS selector for target element
|
|
* @returns {Promise<boolean>} - Success status
|
|
*/
|
|
window.cremoteDragDrop.dragElementToElement = async function(sourceSelector, targetSelector) {
|
|
const sourceElement = document.querySelector(sourceSelector);
|
|
const targetElement = document.querySelector(targetSelector);
|
|
|
|
if (!sourceElement) {
|
|
throw new Error('Source element not found: ' + sourceSelector);
|
|
}
|
|
if (!targetElement) {
|
|
throw new Error('Target element not found: ' + targetSelector);
|
|
}
|
|
|
|
// Ensure source is draggable
|
|
if (!sourceElement.draggable) {
|
|
sourceElement.draggable = true;
|
|
}
|
|
|
|
// Create a persistent DataTransfer object
|
|
const dataTransfer = new DataTransfer();
|
|
dataTransfer.setData('text/plain', sourceElement.id || sourceSelector);
|
|
dataTransfer.setData('application/x-cremote-drag', JSON.stringify({
|
|
sourceId: sourceElement.id,
|
|
sourceSelector: sourceSelector,
|
|
timestamp: Date.now()
|
|
}));
|
|
dataTransfer.effectAllowed = 'all';
|
|
|
|
// Step 1: Dispatch dragstart event
|
|
const dragStartEvent = new DragEvent('dragstart', {
|
|
bubbles: true,
|
|
cancelable: true,
|
|
dataTransfer: dataTransfer
|
|
});
|
|
|
|
const dragStartResult = sourceElement.dispatchEvent(dragStartEvent);
|
|
if (!dragStartResult) {
|
|
console.log('Dragstart was cancelled');
|
|
return false;
|
|
}
|
|
|
|
// Step 2: Small delay for realism
|
|
await new Promise(resolve => setTimeout(resolve, 50));
|
|
|
|
// Step 3: Dispatch dragenter event on target
|
|
const dragEnterEvent = new DragEvent('dragenter', {
|
|
bubbles: true,
|
|
cancelable: true,
|
|
dataTransfer: dataTransfer
|
|
});
|
|
targetElement.dispatchEvent(dragEnterEvent);
|
|
|
|
// Step 4: Dispatch dragover event on target (critical for drop acceptance)
|
|
const dragOverEvent = new DragEvent('dragover', {
|
|
bubbles: true,
|
|
cancelable: true,
|
|
dataTransfer: dataTransfer
|
|
});
|
|
|
|
// Prevent default to allow drop
|
|
dragOverEvent.preventDefault = function() { this.defaultPrevented = true; };
|
|
const dragOverResult = targetElement.dispatchEvent(dragOverEvent);
|
|
|
|
// Step 5: Dispatch drop event on target
|
|
const dropEvent = new DragEvent('drop', {
|
|
bubbles: true,
|
|
cancelable: true,
|
|
dataTransfer: dataTransfer
|
|
});
|
|
|
|
const dropResult = targetElement.dispatchEvent(dropEvent);
|
|
|
|
// Step 6: Dispatch dragend event on source
|
|
const dragEndEvent = new DragEvent('dragend', {
|
|
bubbles: true,
|
|
cancelable: true,
|
|
dataTransfer: dataTransfer
|
|
});
|
|
|
|
sourceElement.dispatchEvent(dragEndEvent);
|
|
|
|
return dropResult;
|
|
};
|
|
|
|
/**
|
|
* Enhanced drop target detection with multiple strategies
|
|
* @param {Element} element - Element to check
|
|
* @returns {boolean} - Whether element can receive drops
|
|
*/
|
|
window.cremoteDragDrop.hasDropEventListener = function(element) {
|
|
// Strategy 1: Check for explicit drop handlers
|
|
if (element.ondrop) return true;
|
|
if (element.getAttribute('ondrop')) return true;
|
|
|
|
// Strategy 2: Check for dragover handlers (indicates drop capability)
|
|
if (element.ondragover || element.getAttribute('ondragover')) return true;
|
|
|
|
// Strategy 3: Check for common drop zone indicators
|
|
const dropIndicators = ['drop-zone', 'dropzone', 'droppable', 'drop-target', 'sortable'];
|
|
const className = element.className.toLowerCase();
|
|
if (dropIndicators.some(indicator => className.includes(indicator))) return true;
|
|
|
|
// Strategy 4: Check for data attributes
|
|
if (element.hasAttribute('data-drop') || element.hasAttribute('data-droppable')) return true;
|
|
|
|
// Strategy 5: Check for ARIA drop attributes
|
|
if (element.getAttribute('aria-dropeffect') && element.getAttribute('aria-dropeffect') !== 'none') return true;
|
|
|
|
return false;
|
|
};
|
|
|
|
/**
|
|
* Perfect coordinate-based drop target detection
|
|
* @param {number} x - X coordinate
|
|
* @param {number} y - Y coordinate
|
|
* @returns {Element|null} - Best drop target element or null
|
|
*/
|
|
window.cremoteDragDrop.findDropTargetAtCoordinates = function(x, y) {
|
|
// Ensure coordinates are within viewport
|
|
if (x < 0 || y < 0 || x > window.innerWidth || y > window.innerHeight) {
|
|
console.log('Coordinates outside viewport:', {x, y, viewport: {width: window.innerWidth, height: window.innerHeight}});
|
|
return null;
|
|
}
|
|
|
|
const elements = document.elementsFromPoint(x, y);
|
|
if (!elements || elements.length === 0) {
|
|
console.log('No elements found at coordinates:', {x, y});
|
|
return null;
|
|
}
|
|
|
|
// Look for explicit drop targets first
|
|
for (const element of elements) {
|
|
if (this.hasDropEventListener(element)) {
|
|
console.log('Found drop target:', element.tagName, element.id, element.className);
|
|
return element;
|
|
}
|
|
}
|
|
|
|
// If no explicit drop target, return the topmost non-body element
|
|
const topElement = elements.find(el => el.tagName !== 'HTML' && el.tagName !== 'BODY');
|
|
console.log('Using topmost element as fallback:', topElement?.tagName, topElement?.id, topElement?.className);
|
|
return topElement || elements[0];
|
|
};
|
|
|
|
/**
|
|
* Perfect drag to coordinates with comprehensive event handling
|
|
* @param {string} sourceSelector - CSS selector for source element
|
|
* @param {number} x - Target X coordinate
|
|
* @param {number} y - Target Y coordinate
|
|
* @returns {Promise<object>} - Detailed result object
|
|
*/
|
|
window.cremoteDragDrop.dragElementToCoordinates = async function(sourceSelector, x, y) {
|
|
const sourceElement = document.querySelector(sourceSelector);
|
|
|
|
if (!sourceElement) {
|
|
throw new Error('Source element not found: ' + sourceSelector);
|
|
}
|
|
|
|
const targetElement = this.findDropTargetAtCoordinates(x, y);
|
|
if (!targetElement) {
|
|
throw new Error('No element found at coordinates (' + x + ', ' + y + ')');
|
|
}
|
|
|
|
// Ensure source is draggable
|
|
if (!sourceElement.draggable) {
|
|
sourceElement.draggable = true;
|
|
}
|
|
|
|
// Create persistent DataTransfer
|
|
const dataTransfer = new DataTransfer();
|
|
dataTransfer.setData('text/plain', sourceElement.id || sourceSelector);
|
|
dataTransfer.setData('application/x-cremote-drag', JSON.stringify({
|
|
sourceId: sourceElement.id,
|
|
sourceSelector: sourceSelector,
|
|
targetX: x,
|
|
targetY: y,
|
|
timestamp: Date.now()
|
|
}));
|
|
dataTransfer.effectAllowed = 'all';
|
|
|
|
// Step 1: Dragstart
|
|
const dragStartEvent = new DragEvent('dragstart', {
|
|
bubbles: true,
|
|
cancelable: true,
|
|
dataTransfer: dataTransfer
|
|
});
|
|
|
|
const dragStartResult = sourceElement.dispatchEvent(dragStartEvent);
|
|
if (!dragStartResult) {
|
|
return { success: false, reason: 'Dragstart was cancelled', targetElement: null };
|
|
}
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 50));
|
|
|
|
// Step 2: Dragenter on target
|
|
const dragEnterEvent = new DragEvent('dragenter', {
|
|
bubbles: true,
|
|
cancelable: true,
|
|
clientX: x,
|
|
clientY: y,
|
|
dataTransfer: dataTransfer
|
|
});
|
|
targetElement.dispatchEvent(dragEnterEvent);
|
|
|
|
// Step 3: Dragover on target (critical!)
|
|
const dragOverEvent = new DragEvent('dragover', {
|
|
bubbles: true,
|
|
cancelable: true,
|
|
clientX: x,
|
|
clientY: y,
|
|
dataTransfer: dataTransfer
|
|
});
|
|
|
|
// Force preventDefault to allow drop
|
|
dragOverEvent.preventDefault = function() { this.defaultPrevented = true; };
|
|
targetElement.dispatchEvent(dragOverEvent);
|
|
|
|
// Step 4: Drop on target
|
|
const dropEvent = new DragEvent('drop', {
|
|
bubbles: true,
|
|
cancelable: true,
|
|
clientX: x,
|
|
clientY: y,
|
|
dataTransfer: dataTransfer
|
|
});
|
|
|
|
const dropResult = targetElement.dispatchEvent(dropEvent);
|
|
|
|
// Step 5: Dragend on source
|
|
const dragEndEvent = new DragEvent('dragend', {
|
|
bubbles: true,
|
|
cancelable: true,
|
|
dataTransfer: dataTransfer
|
|
});
|
|
|
|
sourceElement.dispatchEvent(dragEndEvent);
|
|
|
|
return {
|
|
success: dropResult,
|
|
targetElement: {
|
|
tagName: targetElement.tagName,
|
|
id: targetElement.id,
|
|
className: targetElement.className,
|
|
hasDropListener: this.hasDropEventListener(targetElement)
|
|
}
|
|
};
|
|
};
|
|
|
|
/**
|
|
* Perfect smart drag to coordinates with optimal strategy selection
|
|
* @param {string} sourceSelector - CSS selector for source element
|
|
* @param {number} x - Target X coordinate
|
|
* @param {number} y - Target Y coordinate
|
|
* @returns {Promise<object>} - Enhanced result with method info
|
|
*/
|
|
window.cremoteDragDrop.smartDragToCoordinates = async function(sourceSelector, x, y) {
|
|
const sourceElement = document.querySelector(sourceSelector);
|
|
|
|
if (!sourceElement) {
|
|
throw new Error('Source element not found: ' + sourceSelector);
|
|
}
|
|
|
|
const targetElement = this.findDropTargetAtCoordinates(x, y);
|
|
if (!targetElement) {
|
|
throw new Error('No suitable drop target found at coordinates (' + x + ', ' + y + ')');
|
|
}
|
|
|
|
const canReceiveDrops = this.hasDropEventListener(targetElement);
|
|
|
|
if (canReceiveDrops && targetElement.id) {
|
|
// Use element-to-element drag for maximum reliability
|
|
const success = await this.dragElementToElement(sourceSelector, '#' + targetElement.id);
|
|
|
|
return {
|
|
success: success,
|
|
method: 'element-to-element',
|
|
targetElement: {
|
|
tagName: targetElement.tagName,
|
|
id: targetElement.id,
|
|
className: targetElement.className,
|
|
hasDropListener: true
|
|
}
|
|
};
|
|
} else {
|
|
// Use coordinate-based drag with perfect event handling
|
|
const result = await this.dragElementToCoordinates(sourceSelector, x, y);
|
|
result.method = 'coordinate-based';
|
|
return result;
|
|
}
|
|
};
|
|
|
|
console.log('Perfect Cremote drag and drop helpers loaded successfully');
|
|
})();
|