jQuery UI可拖动分屏 [英] jQuery UI Draggable Split Screen
问题描述
我有一个在桌面上工作正常的分屏滑块，但是我需要jQuery UI才能在手机上工作。可拖动的事件让我来回拖动它，但有时左边的图像会从它的原始位置移动，或者完全消失了。关于如何处理这个的任何想法？
I have a split screen slider that works fine on desktop but I needed jQuery UI to make it work on mobile.The draggable event lets me drag it back and forth but sometimes the image on the left moves from it's original position, or disappears altogether. Any ideas on how to approach this?
这是 codepen 。滑块错误在移动设备上更明显。
Here's the codepen. The slider bug is more visible on mobile devices.
document.addEventListener('DOMContentLoaded', function(){
let wrapper = document.getElementById('wrapper');
let topLayer = wrapper.querySelector('.top');
let handle = wrapper.querySelector('.handle');
let skew = 0;
let delta = 0;
if(wrapper.className.indexOf('skewed') != -1){
skew = 1000;
}
wrapper.addEventListener('mousemove', function(e){
delta = (e.clientX - window.innerWidth / 2) * 0.5;
handle.style.left = e.clientX + delta + 'px';
topLayer.style.width= e.clientX + skew + delta + 'px';
});
});
$(".content-wrap").draggable({
containment: "parent",
dragx: true,
dragy: false,
rotate: false
});
body{
margin: 0;
padding:0;
font-size: 100%;
line-height: 1.6;
font-family: Arial, Helvetica, sans-serif;
}
#wrapper{
position: relative;
width: 100%;
min-height:55vw;
overflow: hidden;
}
.layer{
position:absolute;
width:100vw;
min-height: 55vw;
overflow: hidden;
}
.layer .content-wrap{
position: absolute;
width:100vw;
min-height: 55vw;
}
.layer .content-body{
width: 25%;
position:absolute;
/* top:50%; */
top: 25%;
text-align: center;
transform:translateY(-50%);
color:#fff;
}
.layer img{
position:absolute;
width:65%;
/*width: 35% */
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.layer h1 {
font-size:2em;
font-family: 'Lato', sans-serif;
}
.bottom{
background:#686965;
z-index:1;
}
.bottom .content-body{
right:5%;
}
.bottom h1{
color:#7bbe9a;
font-family: 'Lato', sans-serif;
}
.top{
background:#eff0ec;
color:#222;
z-index:2;
width:50vw;
}
.top .content-body{
left:5%;
color:#333;
}
.handle{
position: absolute;
height: 100%;
display: block;
background-color: #7bbe9a;
width: 5px;
top:0;
left: 50%;
z-index:3;
}
.skewed .handle{
top:50%;
transform:rotate(30deg) translateY(-50%);
height:200%;
transform-origin:top;
}
.skewed .top{
transform: skew(-30deg);
margin-left:-1000px;
width: calc(50vw + 1000px);
}
.skewed .top .content-wrap{
transform: skew(30deg);
margin-left:1000px;
}
@media(max-width:768px){
body{
font-size:75%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https:////cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<!-- Images not Owned by Me -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="">
<link href="https://fonts.googleapis.com/css?family=Lato|Nixie+One" rel="stylesheet">
</head>
<body>
<section id="wrapper" class="skewed">
<!-- <div id="draggable"> -->
<div class="layer bottom">
<div class="content-wrap">
<div class="content-body">
<h1>Designer</h1>
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> -->
</div>
<img src="http://3d.ford.com/assets/ford_gt-min.png" alt="">
</div>
<!-- </div> -->
</div>
<div class="layer top">
<div class="content-wrap">
<div class="content-body">
<h1>Developer</h1>
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> -->
</div>
<img src="http://3d.ford.com/assets/ford_gt_print.png" alt="">
</div>
</div>
<div class="handle"></div>
</section>
<script src=""></script>
</body>
</html>
推荐答案
忘记 draggable ，因为它会导致与 mousemove 事件监听器发生冲突。我已经为移动设备使用了 touchmove 事件监听器。
CODEPEN
Forget the draggable as it is causing conflict with the mousemove event listener. I have used the touchmove event listener for mobile device.
CODEPEN
wrapper.addEventListener("touchmove", function(e) {
delta = (e.changedTouches[0].clientX - window.innerWidth / 2) * 0.5;
handle.style.left = e.changedTouches[0].clientX + delta + "px";
topLayer.style.width = e.changedTouches[0].clientX + skew + delta + "px";
});
注意：你也可以启用 / 禁用 touchmove 和 mousemove 取决于设备类型（触摸与否）。请告诉我这是否有帮助。
Note: You may also enable/disable the touchmove and mousemove depending on the device type (touch or not). Please let me know whether this helps.
这篇关于jQuery UI可拖动分屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
