jQuery UI 可拖动分屏
[英]jQuery UI Draggable Split Screen
问题描述
我有一个在桌面上运行良好的分屏滑块，但我需要 jQuery UI 才能使其在移动设备上运行。可拖动事件让我可以来回拖动它，但有时左侧的图像会从其原始位置移动，或者完全消失。 关于如何解决这个问题的任何想法？
这是代码笔。 滑块错误在移动设备上更明显。
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>
1 个解决方案
解决方案1
4 已采纳 2018-02-09 14:00:06
忘记draggable因为它会导致与mousemove事件侦听器发生冲突。 我已经为移动设备使用了touchmove事件侦听器。 代码笔
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 。
希望这会有所帮助。
可拖动的jQuery UI在屏幕底部创建一个空白
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.