touch.js-drag

<!DOCTYPE html>

<html>


<head>

<meta charset="UTF-8">

<title></title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, 

maximum-scale=1.0, user-scalable=0">

<style type="text/css">


</style>

</head>


<body>

<img src="img/cloud.png" alt="" id="target" />

<script src="js/touch.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

//touch.js的旋转事件

//touch.js是百度开发的触摸事件库

//touch.on绑定事件 touch.off解除事件

//touch.on的参数

//参数1. 绑定事件的标签元素/选择器

//参数2.响应的事件类型(可以使用空格分割 添加多个事件)

//参数3.function事件响应后触发的方法

touch.on('#target', 'touchstart', function(ev) {

ev.preventDefault();

});


var target = document.getElementById("target");

var dx, dy;


touch.on('#target', 'drag', function(ev) {

dx = dx || 0;

dy = dy || 0;

// log("当前x值为:" + dx + ", 当前y值为:" + dy + ".");

var offx = dx + ev.x + "px";

var offy = dy + ev.y + "px";

this.style.webkitTransform = "translate3d(" + offx + "," + offy + ",0)";

});


touch.on('#target', 'dragend', function(ev) {

dx += ev.x;

dy += ev.y;

});

</script>

</body>


</html>

好的,可以参考下面的代码实现一个简单的拖动页面: 1. 在页面中添加一个可拖动的元素,如下: ```html <template> <view class="drag-elem" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"> <text>拖我</text> </view> </template> ``` 2. 在`<script>`中,引入`bindingx`插件,然后实现拖动逻辑: ```javascript <script> export default { methods: { onTouchStart(e) { // 记录初始触摸点 this.startX = e.touches[0].pageX; this.startY = e.touches[0].pageY; // 获取当前元素的位置 const rect = uni.createSelectorQuery().select('.drag-elem').boundingClientRect(); rect.exec((res) => { this.elemX = res[0].left; this.elemY = res[0].top; }); }, onTouchMove(e) { // 计算拖动距离 const moveX = e.touches[0].pageX - this.startX; const moveY = e.touches[0].pageY - this.startY; // 更新元素位置 uni.requireNativePlugin('bindingx').bind({ eventType: 'timing', element: document.querySelector('.drag-elem'), props: [ { element: '.drag-elem', property: 'transform.translateX', expression: `${this.elemX + moveX}px` }, { element: '.drag-elem', property: 'transform.translateY', expression: `${this.elemY + moveY}px` } ] }); }, onTouchEnd() { // 解除绑定 uni.requireNativePlugin('bindingx').unbind({ eventType: 'timing', element: document.querySelector('.drag-elem') }); } } }; </script> ``` 3. 样式部分,可以根据需求自行调整: ```css <style> .drag-elem { position: absolute; left: 100px; top: 100px; width: 100px; height: 100px; background-color: #f00; color: #fff; display: flex; justify-content: center; align-items: center; user-select: none; touch-action: none; } </style> ``` 这样就可以实现一个简单的拖动页面了。需要注意的是,`bindingx`插件需要在真机上才能生效。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值