vue使用html5图片拖拽排序

最新推荐文章于 2024-04-22 13:59:39 发布

ya.mi

最新推荐文章于 2024-04-22 13:59:39 发布

阅读量328

点赞数

文章标签：前端 html javascript vue

本文链接：https://blog.csdn.net/weixin_43111269/article/details/128673775

版权

vue使用html5图片拖拽排序，主要用到的是html5的拖拽事件，我用到了dragstart、dragover、dragenter、drop

拖拽事件：

ondragstart：在被拖拽时被调用。
ondrag：在元素正在被拖拽时调用。
ondragend：在拖拽元素放置时调用。
ondragenter：在拖拽元素进入到放置元素有效区域时调用。
ondragover：在拖拽元素覆盖放置元素有效区域时调用。
ondragleave：在拖拽元素离开放置元素有效区域时调用。
ondrop：在拖拽元素被放置在放置元素中调用。

完整示例：
html部分

<img v-for="(item, index) in imgs" :src="item.url" class="img" :draggable="true" @dragstart="dragCurrentStart($event, index)" @dragover="e=>e.preventDefault()" @dragenter="dragTargetEnter($event, index)" @drop="dragEnd" />

js部分

data() {
	return {
	 imgs: [
        {
          url: 'https://inews.gtimg.com/newsapp_bt/0/12998770370/1000',
          id: 1
        },
        {
          url: 'https://tupian.qqw21.com/article/UploadPic/2022-4/202243012103665854.jpeg',
          id: 2
        }
      ],
      dragCurIndex: null,                       // 当前拖拽图片下标
      timer: null
	}
},
methods: {
	// 开始拖拽当前图片
    dragCurrentStart(e, index) {
      this.dragCurIndex = index;
    },

    // 图片拖拽排序
    dragTargetEnter(e,index) {
      e.preventDefault();

      if (this.timer) {
        clearTimeout(this.timer);
      }

      this.timer = setTimeout(()=>{
        let tmp = this.imgs[index];
        this.imgs.splice(index, 1, this.imgs[this.dragCurIndex]);
        this.imgs.splice(this.dragCurIndex, 1, tmp);
        this.dragCurIndex = index;
      },100)
    },

    // 拖拽结束清除定时器
    dragEnd() {
      clearTimeout(this.timer);
    }
}