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

我提供这种非常蹩脚的帮助 - 你将不得不继续努力。但是：你不能只检查mousedown状态，并且可能鼠标悬停在元素状态（这里没有显示），然后检查一下，如果两者都不正确，你的mousemove函数中有return吗？

这里有一个非常糟糕的版本。主要问题是区分鼠标和点击，但你会看到你是否最初悬停，你将没有移动，然后点击mousedown，你会。

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

这可以帮到你。这是devider的代码。 https://github.com/CodyHouse/image-comparison-slider/blob/master/js/main.js

使元素可拖动

2 个答案: