HIM-public/webdrop-bridge
1
0
Fork 0
Code Issues Pull requests Projects Releases 3 Packages Wiki Activity Actions 1

fix: Implement drag-and-drop functionality with QWebChannel integration

Browse source
This commit is contained in:
claudi 2026-01-30 08:17:01 +01:00
parent b2681a9cbd
commit f701247fab
4 changed files with 165 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

56
webapp/index.html
View file

@ -163,13 +163,13 @@
<div class="drag-item" draggable="true" id="dragItem1">
<div class="icon">🖼️</div>
<h3>Sample Image</h3>
<p id="path1">Z:\samples\image.psd</p>
<p id="path1">Z:\data\test-image.jpg</p>
</div>
<div class="drag-item" draggable="true" id="dragItem2">
<div class="icon">📄</div>
<h3>Sample Document</h3>
<p id="path2">Z:\samples\document.indd</p>
<p id="path2">Z:\data\API_DOCUMENTATION.pdf</p>
</div>
<div class="drag-item" draggable="true" id="dragItem3">
@ -193,57 +193,5 @@
<p>WebDrop Bridge v1.0.0 | Built with Qt and PySide6</p>
</div>
</div>
<script>
const items = document.querySelectorAll('.drag-item');
const statusMessage = document.getElementById('statusMessage');
items.forEach(item => {
item.addEventListener('dragstart', (e) => {
const pathElement = item.querySelector('p');
const path = pathElement.textContent.trim();
e.dataTransfer.effectAllowed = 'copy';
e.dataTransfer.setData('text/plain', path);
statusMessage.textContent = `Dragging: ${path}`;
statusMessage.className = 'status-message info';
console.log('🚀 Drag started:', path);
console.log('📋 DataTransfer types:', e.dataTransfer.types);
});
item.addEventListener('dragend', (e) => {
const pathElement = item.querySelector('p');
const path = pathElement.textContent.trim();
if (e.dataTransfer.dropEffect === 'none') {
statusMessage.textContent = `❌ Drop failed or cancelled`;
statusMessage.className = 'status-message info';
} else {
statusMessage.textContent = `✅ Drop completed: ${e.dataTransfer.dropEffect}`;
statusMessage.className = 'status-message success';
}
console.log('🏁 Drag ended:', e.dataTransfer.dropEffect);
});
// Visual feedback
item.addEventListener('dragstart', () => {
item.style.opacity = '0.5';
item.style.transform = 'scale(0.95)';
});
item.addEventListener('dragend', () => {
item.style.opacity = '1';
item.style.transform = 'scale(1)';
});
});
// Application info
console.log('%cWebDrop Bridge', 'font-size: 18px; font-weight: bold; color: #667eea;');
console.log('Ready for testing. Drag items to other applications.');
console.log('Check the path values in the drag items above.');
</script>
</body>
</html>