javascript - jQuery UI Draggable Split Screen

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?

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=".1.1/jquery.min.js"></script>
<script src=".11.2/jquery-ui.min.js"></script>
<script src="https:////cdnjs.cloudflare/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="|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=".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=".png" alt="">
        </div>
      </div>
      
      <div class="handle"></div>
    </section>
    
    <script src=""></script>
  </body>
</html>

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis./ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https:////cdnjs.cloudflare./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./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./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./assets/ford_gt_print.png" alt="">
        </div>
      </div>
      
      <div class="handle"></div>
    </section>
    
    <script src=""></script>
  </body>
</html>

Share Improve this question edited Feb 9, 2018 at 14:28 Gibin Ealias 2,8575 gold badges24 silver badges41 bronze badges asked Feb 9, 2018 at 3:40 user7311741

Add a ment |

1 Answer 1

Sorted by: Reset to default 6

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";
});

Note: You may also enable/disable the touchmove and mousemove depending on the device type (touch or not).

Hope this helps.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - jQuery UI Draggable Split Screen - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)