jQuery UI可拖动分屏
我有一个在桌面上工作正常的分屏滑块但我需要jQuery UI才能在移动设备上工作。可拖动的事件让我来回拖动它但有时左边的图像从它的原始位置移动，或者完全消失。 关于如何处理这个的任何想法？
这是codepen 。 滑块错误在移动设备上更明显。
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%; } }
Document <!-- --> Designer
<!-- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
--> 
<!-- --> Developer
<!-- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
--> 
忘记draggable因为它导致与mousemove事件侦听器冲突。 我已经为移动设备使用了touchmove事件监听器。 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 （触摸与否）。 请告诉我这是否有帮助。