draggable onend

`draggable`是一个JavaScript库，用于使DOM元素可拖动和移动。它非常小巧，只有约500个字节，并且没有任何依赖关系。你可以通过引用`dragmove.js`库来使用它。

在`draggable`中，`onEnd`是一个可选的回调函数，它在拖动结束时被调用。该回调函数接收目标元素以及拖动结束时的x和y坐标作为参数。

以下是一个使用`draggable`的示例代码：

// 引入dragmove.js库
<script src="dragmove.js"></script>

// 创建一个可拖动的元素
<div id="box" class="drag-h">Drag me!</div>

// 在拖动结束时执行的回调函数
function onDragEnd(element, x, y) {
  console.log("Drag ended!");
  console.log("Element:", element);
  console.log("Coordinates:", x, y);
}

// 将拖动功能应用于元素，并指定onEnd回调函数
dragmove(document.querySelector("#box"), {
  onEnd: onDragEnd
});

当你拖动`box`元素并释放鼠标时，`onEnd`回调函数将被调用，并打印出相应的信息。

相关问题

Vue-draggable-resizable示例

以下是一个简单的 Vue-draggable-resizable 示例：

<template>
  <div>
    <draggable
      v-model="list"
      :options="{group:'widgets'}"
      :element="'div'"
      :move="onMove"
      :end="onEnd"
    >
      <div
        v-for="(item, index) in list"
        :key="index"
        :style="{width: item.width + 'px', height: item.height + 'px', backgroundColor: item.color}"
        class="widget"
      >
        <vue-draggable-resizable
          :w="item.width"
          :h="item.height"
          :x="item.x"
          :y="item.y"
          :min-width="100"
          :min-height="100"
          :active="item.active"
          :parent="true"
          :snap-to-grid="true"
          :grid-size="[20, 20]"
          @resizing="onResizing"
          @dragging="onDragging"
          @dragstop="onDragStop"
          @resizingstop="onResizeStop"
        >
          <div class="content">
            <p>{{ item.text }}</p>
          </div>
        </vue-draggable-resizable>
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import VueDraggableResizable from 'vue-draggable-resizable'

export default {
  components: {
    draggable,
    VueDraggableResizable
  },
  data() {
    return {
      list: [
        { x: 0, y: 0, width: 200, height: 200, color: '#f5f5f5', text: 'Widget 1', active: false },
        { x: 220, y: 0, width: 300, height: 200, color: '#f5f5f5', text: 'Widget 2', active: false },
        { x: 0, y: 220, width: 250, height: 300, color: '#f5f5f5', text: 'Widget 3', active: false }
      ]
    }
  },
  methods: {
    onMove(event) {
      return event.related.className === 'content'
    },
    onEnd(event) {
      this.list[event.newIndex].active = false
    },
    onResizing(event) {
      const item = this.list[event.index]
      item.width = event.width
      item.height = event.height
    },
    onDragging(event) {
      const item = this.list[event.index]
      item.x = event.x
      item.y = event.y
    },
    onDragStop(event) {
      const item = this.list[event.index]
      item.active = true
    },
    onResizeStop(event) {
      const item = this.list[event.index]
      item.active = true
    }
  }
}
</script>

<style scoped>
.widget {
  position: absolute;
  border: 1px solid #ccc;
}

.content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: move;
}
</style>

在这个示例中，我们使用了 Vue-draggable-resizable 组件来创建可拖拽和可调整大小的小部件。我们使用了 `draggable` 组件来使小部件能够被拖动并与其他小部件交换位置。

我们还使用了一些事件来处理小部件的拖动和调整大小。当小部件被拖动或调整大小时，我们更新其位置和大小，并将其标记为活动状态，以便在其他事件处理程序中使用。

最后，我们使用一些 CSS 样式来设置小部件的外观和位置。

vue-draggable使用animation导致拖拽完成后,拖拽的元素延迟后才消失

这个问题可能是由于动画效果导致的延迟。你可以尝试在拖拽结束时，立即将拖拽的元素隐藏或移除，然后再开始动画效果。

具体地，你可以在拖拽结束时，使用 `transitionend` 事件监听动画结束，然后再将元素移除或隐藏。代码示例：

methods: {
  onEnd() {
    // 在拖拽结束时立即将元素隐藏
    this.hideElement();
    
    // 监听动画结束事件
    this.$refs.draggable.addEventListener('transitionend', this.onTransitionEnd);
  },
  onTransitionEnd(event) {
    // 确认是拖拽元素的动画结束
    if (event.target === this.$refs.draggable) {
      // 动画结束后再将元素移除或隐藏
      this.removeElement();
      
      // 移除事件监听
      this.$refs.draggable.removeEventListener('transitionend', this.onTransitionEnd);
    }
  },
  hideElement() {
    this.$refs.draggable.style.opacity = 0;
  },
  removeElement() {
    // 移除元素
    this.$refs.draggable.remove();
    // 或者隐藏元素
    // this.$refs.draggable.style.display = 'none';
  }
}

这样处理后，应该能够避免拖拽完成后的延迟问题。