Javascript 为Click+实现一个组件；拖曳

我想在React中实现这个组件 在下面的链接中

如何实现拖放+单击，以及如何取消部分图像的遮罩？下面有两张图片

<div className="parent">
   <div className="dragControl" id="bar"></div>
   <img src="image1.jpg" />
   <img src="image2.jpg" />
</div>

如何创建遮罩以取消遮罩这两个图像？它们看起来都是绝对位置，然后慢慢地暴露出来

---

我只是想知道HTML/CSS部分，因为这给了我一个无法实现React代码的心理障碍。

我曾经用jQuery和纯HTML做过类似的效果。这是我一起做的娱乐活动

效果的诀窍是在父容器中有两个绝对定位的图像，在父容器上有一个单击事件。在click事件中，需要获取鼠标位置的值。将滑块控制柄定位到鼠标x坐标，然后顶部图像的宽度需要是鼠标x坐标的宽度减去父对象的左偏移：

 var offset = container.offset().left;
 var x = e.clientX - offset;

然后给顶部图像一个

overflow:hidden

值，随着图像包装容器的宽度变化，将产生覆盖和揭穿底部图像的效果

我遇到的主要问题是，试图动态调整img标签的大小是行不通的。因此，解决方案是将每个图像包装在自己的容器中

您还需要将此条件添加到事件侦听器，以检查鼠标x坐标是否在父容器内，否则，滑块手柄将滑出图像：

   if (x < 700 && x > 0) {
    // change css here
   }

这将阻止浏览器在鼠标单击并拖动图像以在屏幕上拖动图像时创建闪烁的蓝色矩形

我希望这能缓解你的问题，或者至少让你走上正确的道路。万圣节快乐

pointer-events: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;