uniapp 拖拽,

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

1.使用插件vuedraggable

vue-draggable官方中文文档

	
	
	  
		
	
	
	  
		
	  
	
2.判断是否放置进入div

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

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


uniapp 拖拽,_第1张图片

 

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
				// }
			},

你可能感兴趣的:(uni-app,前端)