uniapp 拖拽，

从一个div拖拽到另一个div放置，改变数据

1.使用插件vuedraggable

vue-draggable官方中文文档

	
	<draggable class="arrays" el="view" v-model="materialList" 
        :group="{name: 'drag', pull: 'clone'}"
		:sort="false" draggable=".material" :options="{sort: false}">
	  <view class="material" v-for="(item, index) of materialList" :key="index"
					@touchend="(v) => touchend(item, v, index)" v-if="!item.hidden">
		<img :src=" item.url" alt="" style="width: 100%;height: 100%;"></view>
	</draggable>
	<draggable el="div" class="correctDiv" v-model="correctList" 
        :group="{name: 'drag', pull: false}"	:sort="false">
	  <view class="material" v-for="(item, index) of correctList" :key="index" >
		<img v-if=" item" :src=" item.url" style="width: 100%;height: 100%;">
	  </view>
	</draggable>

2.判断是否放置进入div

图1 为当前div位置，根据 uni.createSelectorQuery().select('.class')获取，

图2为拖拽结束事件后位置

 

touchend(item, v, index) {   
 let obj = uni.createSelectorQuery().select('.class') // 需要拖拽元素父级class
	obj.boundingClientRect((data) => { // data - 各种参数
				    	const obj2Data = {
						left: v.changedTouches[0].clientX, // v为事件$event
						right: v.changedTouches[0].pageX,
						top: v.changedTouches[0].pageY,
						bottom: v.changedTouches[0].clientY
					}
					// console.log(data.left, obj2Data.left, 'left', data.right, obj2Data.right, 'right')
					// console.log(data.bottom, obj2Data.bottom, 'bottom', data.top, obj2Data.top, 'top')
				
					if (this.check(obj2Data, data)) {
                       // 拖拽进入    
					
					}

	}).exec()
},
check(obj1, obj2) {
				//判断元素是否接触元素
				if (obj2.left > obj1.right || obj2.right < obj1.left || obj2.top > 
                   obj1.bottom || obj2.bottom < obj1.top) {
					console.log('没进入')
					return false;
				} else {
					console.log('进入')
					return true;
				}
				// 判断元素被拖放到指定元素内
				// if (obj1.left < obj2.right && obj1.left > obj2.left && obj2.bottom > 
                  obj1.bottom && obj1.top > obj2.top) {
				// 	return true
				// } else {
				// 	return false
				// }
			},