一、问题：

例如购物车小图标可任意拖动
uniapp实现界面可任意拖动小图标

二、解决步骤

2.1 根据uni-app官方提供的案例，创建组件

创建 car.vue组件，将如下代码复制到该文件.

<template>
	<view>
		<view class="area">
			<view @touchstart="test.touchstart" @touchmove="test.touchmove" class="movable">{{test.msg}}</view>
		</view>
	</view>
</template>
<script module="test" lang="wxs">
	var startX = 0
	var startY = 0
	
	var lastLeft = 0;
	var lastTop = 0;
	function touchstart(event, ins) {
		console.log("touchstart")
	  var touch = event.touches[0] || event.changedTouches[0]
	  startX = touch.pageX
	  startY = touch.pageY
	  
	  lastLeft = touch.pageX - 50
	  lastTop = touch.pageY - 50
	  console.log(touch.pageX+"-------")
	  
	  
	}
	function touchmove(event, ins) {
	  var touch = event.touches[0] || event.changedTouches[0]
	  var pageX = touch.pageX
	  var pageY = touch.pageY
	  
	 
	  
	  var left = pageX - startX + lastLeft
	  var top = pageY - startY + lastTop
	  startX = pageX
	  startY = pageY
	  lastLeft = left
	  lastTop = top
	  
	  ins.selectComponent('.movable').setStyle({
	    left: left + 'px',
	    top: top + 'px'
	  })
	  return false
	}
	module.exports = {
	  msg: 'Hello',
	  touchstart: touchstart,
	  touchmove: touchmove
	}
</script>

<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
		}
	}
</script>

<style>
.area{
	position: absolute;
	width: 100%;
	height: 100%;
}
.movable{
	position: absolute;
	width: 100px;
	height: 100px;
	right: 50px;
	bottom: 50px;
	color: white;
	text-align: center;
	line-height: 100px;
	background-color: red;
	z-index: 1000;
}
</style>