vuedraggable拖拽到目标区域的回调事件

Question

我要把item1从A区域拖拽到B区域，
我想在B区域设置监听回调事件，
像jquery-ui 当拖拽元素到B区域并释放鼠标 就会调用drop方法

$(".freeWrap").droppable({
            drop: function( event, ui ) {
                
                console.log("元素已经在目标区域上方")
            }
        });

vuedraggable有没有像drop这样的方法，我想实现下面这样的一个拖拽功能

Answer 1

在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发,假设目标元素是target

<div class="target"  @dragover='onDragover' @drop='onDrop'></div>
onDragover(e) {
    e.preventDefault()
}
onDrop() {
    // 业务代码
}

Answer 2

会触发sort和add事件。用add吧。

@add="addDrag(event)"
// event里能拿到一些信息，这个event是vuedraggable处理过的

Answer 3

解决问题了吗楼主，我遇到和你一样的问题，求解呀

Answer 4

请问楼主解决了吗，可以分享下解决方法吗？

Answer 5

直接@drop


A:@dragstart="dragstart($event)" @dragend="dragend($event)"


B:@dragleave="dragleave($event)" @dragover="dragover($event)" @drop='drop($event)'

Answer 6

vuedraggable是对Sortable.js的封装
事件列表见文档

Answer 7

老铁，图片上的demo能给我一份吗？