-
onDragStart
return value could be used asdataTransfer
-
onDragEnd(dragStatus)
-
dragStatus
- top
- left
-
onDragEnter(dropStatus)
-
onDragLeave(dropStatus)
-
onDragOver(dropStatus)
-
onDrop(dropStatus)
-
dropStatus
- dataTransfer
- loc
- top
- left
npm install vue-steven-draggable
import { createApp } from '@vue/runtime-dom';
import stevenDraggable from 'v-steven-draggable';
import App from './app';
const app = createApp(App);
app.use(stevenDraggable);
app.mount('#app');
<div class='inline-block w-40 h-40 border-2 border-dotted border-blue-500'>
<!-- dragzone = parent -->
<span v-steven-draggable>dragging target</span>
<!-- customize dragzone-->
<span
class='inline-block w-8 h-8 bg-blue-500 select-none poiner'
v-steven-draggable={{
onDragStart,
onDragEnd,
dragZone: 'body' // querySelector
}}
></span>
</div>
function onDragStart() {
const transferData = {
name: 'alex',
email: '166'
};
console.log('onDragStart', transferData);
return transferData;
}
function onDragEnd(dragStatus) {
console.log('onDragEnd', dragStatus);
}
<div
class='helloworld inline-block w-40 h-40 border-2 border-dotted border-blue-500'
v-steven-droppable={{
onDragEnter,
onDragOver,
onDragLeave,
onDrop
}}
></div>
function onDragEnter(dropStatus) {
console.log('onDragEnter', dropStatus);
}
function onDragOver(dropStatus) {
console.log('onDragOver', dropStatus);
}
function onDragLeave(dropStatus) {
console.log('onDragLeave', dropStatus);
}
function onDrop(dropStatus) {
console.log('onDrop', dropStatus);
}