electron-drag-drop
Version:
Easily manipulate drag and drop in Electron.
61 lines (49 loc) • 1.27 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Panel Example</title>
<style>
body {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
display: flex;
flex-direction: column;
background: #555;
}
h2 {
color: #f90;
}
.box {
color: #888;
border: 1px solid #888;
width: 200px;
height: 100px;
margin: 5px;
}
.box[drag-hovering] {
color: #090;
border: 1px solid #090;
}
</style>
</head>
<body>
<h2>Drop</h2>
<div id="drop" class="box" droppable="foo,bar,file" multi>Drop Area</div>
<script>
const {drag, droppable, addon} = require('../../index');
let dropEL = document.getElementById('drop');
addon (dropEL, droppable);
dropEL._initDroppable(dropEL);
dropEL.addEventListener('drop-area-move', event => {
drag.updateDropEffect(event.detail.dataTransfer, 'copy');
});
// NOTE: prevent system drop effect
window.addEventListener('dragover', event => {
event.dataTransfer.dropEffect = 'none';
event.preventDefault();
});
</script>
</body>
</html>