uniapp端拖拽

最新推荐文章于 2025-03-25 15:42:30 发布

爱墨鱼的猫

最新推荐文章于 2025-03-25 15:42:30 发布

阅读量1k

点赞数 7

文章标签： uni-app

本文链接：https://blog.youkuaiyun.com/qq_42934208/article/details/135341752

版权

实现效果：拖拽元素（h5和app端生效，小程序和nvue无效）
在这里插入图片描述
使用安装包：拖拽库
拖拽库sortablejs

npm i sortablejs

使用uniapp renderjs（获取dom元素）

<template>
  <view>
    <!-- 支持拖拽排序、左滑菜单 -->
    <view id="list1" style="flex-wrap: wrap; background-color: beige">
      <view
        style="height: 100px"
        v-for="(item, index) in options1"
        :data-id="item.id"
        :key="index"
        >{{ item.text }}</view
      >
    </view>
    <!-- 支持拖拽排序、左滑菜单 -->
    <view
      id="list2"
      style="flex-wrap: wrap; background-color: rgb(32, 110, 184)"
    >
      <view
        style="height: 100px"
        v-for="(item, index) in options2"
        :data-id="item.id"
        :key="index"
        >{{ item.text }}</view
      >
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      options1: [
        {
          text: '列表内容一',
          id: 1,
        },
        {
          text: '列表内容er',
          id: 2,
        },
        {
          text: '列表内容三',
          id: 3,
        },
      ],
      options2: [
        {
          text: '列表内容一',
          id: 11,
        },
        {
          text: '列表内容er',
          id: 22,
        },
        {
          text: '列表内容三',
          id: 33,
        },
      ],
    }
  },
  methods: {
    changeSort1(e) {
      console.log('change1', e)
    },
    changeSort2(e) {
      console.log('change2', e)
    },
  },
}
</script>

<script module="sortable" lang="renderjs">
import Sortable from 'sortablejs'
export default {
	mounted() {
		var el1 = document.getElementById('list1'); //获取控件
			let option1 = {
				animation: 150,
				onEnd: (e) => {
					// 拖拽完成后回调
					this.$ownerInstance.callMethod('changeSort1', sortable1.toArray());
				}
			}
			let sortable1 = Sortable.create(el1, option1);
			var el2 = document.getElementById('list2'); //获取控件
			let option2 = {
				animation: 150,
				onEnd: (e) => {
					// 拖拽完成后回调
					this.$ownerInstance.callMethod('changeSort2', sortable2.toArray());
				}
			}
			let sortable2 = Sortable.create(el2, option2);

	},

};
</script>

<style lang="scss">
.u-demo-block__title {
  padding: 10px 0 2px 15px;
}

.swipe-action {
  &__content {
    padding: 25rpx 0;

    &__text {
      font-size: 15px;
      color: $u-main-color;
      padding-left: 30rpx;
    }
  }
}
</style>