下面是我的测试代码,
我想实现drag的时候,能够让下方的div随着drag变动。
但是,获取不到drag的坐标。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="http://ask.dcloud.net.cn/css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init({
gestureConfig:{
tap: true, //默认为true
doubletap: true, //默认为false
longtap: true, //默认为false
swipe: true, //默认为true
drag: true, //默认为true
hold:false,//默认为false,不监听
release:false//默认为false,不监听
}
});
</script>
<style type="text/css">
.footer{
position: absolute;
height: 60px;
background: red;
bottom: 0;
/*border: 1px solid black;*/
width: 100%;
}
.my-container{
overflow: hidden;
height: 100%;
}
.test{
position: relative;
left: 0;
width: 50px;
height: 50px;
border: 1px solid dodgerblue;
display: inline-block;
}
.test1{
height: 60px;
width: 2000px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="mui-content">
<footer class="footer">
<div class="my-container">
<div class="test1">
<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
<div class="test">4</div>
<div class="test">5</div>
<div class="test">6</div>
<div class="test">7</div>
<div class="test">8</div>
<div class="test">9</div>
<div class="test">0</div>
<div class="test">11</div>
<div class="test">12</div>
<div class="test">13</div>
<div class="test">14</div>
<div class="test">15</div>
<div class="test">16</div>
<div class="test">17</div>
<div class="test">18</div>
<div class="test">19</div>
<div class="test">20</div>
<div class="test">21</div>
<div class="test">22</div>
<div class="test">23</div>
<div class="test">24</div>
<div class="test">25</div>
</div>
</div>
</footer>
</div>
<script type="text/javascript">
mui('.mui-content').on('drag','.test',function(e){
console.log(e.detail.move.x ":" e.detail.move.y);
});
</script>
</body>
</html>
Peach
这个也够用了,可以获取移动距离
2016-08-10 02:03