为什么滑块适用于桌面而不适用于移动设备？

Question

滑块功能似乎无法在平板电脑和移动设备上使用，但在台式机上可以正常使用。 我不确定如何解决此功能。

我需要为移动设备添加“触摸”吗？ 如果是这样，添加此内容的最佳方法是什么？

我已经在所有浏览器上测试了它，并且在移动视图中查看时该功能似乎被禁用。

 img { max-width: 100%; } /* -------------------------------- Main components -------------------------------- */ .cd-image-container { position: relative; width: 100%; margin: 0em auto; } .cd-image-container img { display: block; } .cd-image-label { position: absolute; top: 0; right: 0; color: #000000; padding: 5px 10px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s; -moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s; transition: transform 0.3s 0.7s, opacity 0.3s 0.7s; } .cd-image-label.is-hidden { visibility: hidden; } .is-visible .cd-image-label { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .cd-resize-img { position: absolute; top: 0; left: 0; width: 0; height: 100%; overflow: hidden; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; border-right:solid 1px #dedede; } .cd-resize-img img { position: absolute; left: 0; top: 0; display: block; height: 100%; width: auto; max-width: none; } .cd-resize-img .cd-image-label { right: auto; left: 0; } .is-visible .cd-resize-img { width: 50%; /* bounce in animation of the modified image */ -webkit-animation: cd-bounce-in 0.7s; -moz-animation: cd-bounce-in 0.7s; animation: cd-bounce-in 0.7s; } @-webkit-keyframes cd-bounce-in { 0% { width: 0; } 60% { width: 55%; } 100% { width: 50%; } } @-moz-keyframes cd-bounce-in { 0% { width: 0; } 60% { width: 55%; } 100% { width: 50%; } } @keyframes cd-bounce-in { 0% { width: 0; } 60% { width: 55%; } 100% { width: 50%; } } .cd-handle { position: absolute; height: 22px; width: 44px; /* center the element */ left: 50%; top: 55%; margin-left: -22px; margin-top: -22px; background: #000000 url("https://images.clickfunnels.com/09/a714400d3211e7a0bd7d7140585054/cd-arrows.svg") no-repeat center center; cursor: move; box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); opacity: 0; -webkit-transform: translate3d(0, 0, 0) scale(0); -moz-transform: translate3d(0, 0, 0) scale(0); -ms-transform: translate3d(0, 0, 0) scale(0); -o-transform: translate3d(0, 0, 0) scale(0); transform: translate3d(0, 0, 0) scale(0); z-index:300; } .cd-handle.draggable { /* change background color when element is active */ background-color: #3a3a3a; } .is-visible .cd-handle { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1); -moz-transform: translate3d(0, 0, 0) scale(1); -ms-transform: translate3d(0, 0, 0) scale(1); -o-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s; -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s; transition: transform 0.3s 0.7s, opacity 0s 0.7s; } 

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/guruscriptz/image-comparison.js"></script> <figure class="cd-image-container"> <img src="https://s3.us-east-2.amazonaws.com/audi-email-assets/damage-slider-assets/Exteroir_Unacceptable.jpg" alt="Original Image"> <span class="cd-image-label" data-type="original"><?php echo $data['lang']['unacceptable']?></span> <div class="cd-resize-img"> <!-- the resizable image on top --> <img src="https://s3.us-east-2.amazonaws.com/audi-email-assets/damage-slider-assets/Exteroir_Acceptable.jpg" alt="Modified Image"> <span class="cd-image-label" data-type="modified"><?php echo $data['lang']['acceptable']?></span> </div> <span class="cd-handle"></span> </figure> 

Answer 1

我通过以下URL查看了您的事件处理： https : //s3-us-west-2.amazonaws.com/guruscriptz/image-comparison.js

您似乎缺少移动活动。 除鼠标相关事件外，还需要touchstart，touchend，touchmove和touchcancel事件。 这将允许非基于鼠标的单击来移动滑块。

例如：

ragElement.parents().on("mousemove vmousemove"

应该

ragElement.parents().on("mousemove vmousemove touchmove"

等等