使元素可拖动

Question

我正在使用比较滑块，但遇到一些问题。 我希望使手柄可拖动，而不是在mousemove上移动它。 我试图为可拖动的手柄进行更新，但似乎无法正常工作。 我不想为此使用jQuery UI，非常感谢您的帮助。 下面是脚本：

 document.addEventListener('DOMContentLoaded', function() { var parent = document.querySelector('.splitview'), topPanel = parent.querySelector('.top'), handle = parent.querySelector('.handle'), skewHack = 0, delta = 0; // If the parent has .skewed class, set the skewHack var. if (parent.className.indexOf('skewed') != -1) { skewHack = 1000; } parent.addEventListener('mousemove', function(event) { // Get the delta between the mouse position and center point. delta = (event.clientX - window.innerWidth / 2) * 0.5; // Move the handle. handle.style.left = event.clientX + delta + 'px'; // Adjust the top panel width. topPanel.style.width = event.clientX + skewHack + delta + 'px'; }); }); 

 /* Panels. */ .splitview { position: relative; width: 100%; min-height: 45vw; overflow: hidden; } .panel { position: absolute; width: 100vw; min-height: 45vw; overflow: hidden; } .panel .content { position: absolute; width: 100vw; min-height: 45vw; color: #FFF; } .panel.top .description { transform: translateY(-50%); } .panel.bottom .description { transform: translateY(-50%); } .panel .description { width: 25%; position: absolute; top: 50%; text-align: center; z-index: 999; } .panel .description h1 { margin-bottom: 0; font-size: 60px; line-height: .9; } .panel .description ul { text-align: left; margin-left: 4.5em; } .panel .description ul li { list-style: disc; font-size: 20px; } .panel .description h1, .panel .description p, .panel .description ul { color: #fff; } .panel img { box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.15); width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; filter: brightness(0.3); transition: 0.2s ease; } .panel img:hover { filter: brightness(0.6); } .panel .description img { position: relative; top: 0; width: 60%; transform: none; left: 0; box-shadow: 0 0 20px 7px rgba(0, 0, 0, 0.15); margin-bottom: 1em; display: inline-block; filter: brightness(1); } .bottom { background-color: gray; z-index: 1; } .bottom .description { right: 10%; } .top { background-color: green; z-index: 2; width: 50vw; } .top .description { left: 10%; } /* Handle. */ .handle { height: 100%; position: absolute; display: block; background-color: #fff; width: 5px; top: 0; left: 50%; z-index: 3; } /* Skewed. */ .skewed .handle { top: 50%; transform: translateY(-50%); height: 200%; -webkit-transform-origin: top; -moz-transform-origin: top; transform-origin: top; } .skewed .top { margin-left: -1000px; width: calc(50vw + 1000px); } .skewed .top .content { margin-left: 1000px; } 

  <div class="splitview skewed"> <div class="panel bottom"> <div class="content"> <img src="https://images.pexels.com/photos/302804/pexels-photo-302804.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Original"> </div> </div> <div class="panel top"> <div class="content"> <img src="https://images.pexels.com/photos/707915/pexels-photo-707915.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Duotone"> </div> </div> <div class="handle"></div> <input type="range" min=0 max=100 value=50/> <inpit </div> 

Answer 1

我提供了非常la脚的帮助-您将不得不做很多工作。 但是：你不能只检查鼠标按下的状态，并可能鼠标悬停元素状态（这里没有显示），然后检查，如果两者都不是真正的， return你的鼠标移动功能的？

这是一个非常糟糕的版本。 主要问题是区分鼠标上移和单击，但是您将看到最初是否悬停在鼠标上方没有任何移动，然后单击鼠标下移就可以了。

var mousedown = false;
parent.addEventListener('mousedown', function(event) {
  mousedown = true;
});
parent.addEventListener('mouseup', function(event) {
  mousedown = false;
});  

parent.addEventListener('mousemove', function(event) {
   if(!mousedown) return; 

 ... your code ...

无论如何，这不是很多，但也许是一个开始。 祝好运。

Codepen： https ：//codepen.io/dmgig/pen/mLZPXG

Answer 2

这可以为您提供帮助。 这是开发者的代码。 https://github.com/CodyHouse/image-comparison-slider/blob/master/js/main.js