javascript - 拖动元素后更改值 css 属性

Question

我有两个视频:视频1位于视频2下方。当我移动可拖动元素时，我想显示视频1的一部分。

我找到了一个使用图片运行的示例，并用视频对其进行了测试，但效果不佳。

摆弄图片:https://jsfiddle.net/kr64c5Lf/11/

摆弄视频:https://jsfiddle.net/1co0x58v/9/

JAVASCRIPT

    $("#draggable").draggable();

    jQuery("#droppable").droppable({
      drop: function (event, ui) {

        debugger;

        var pos = ui.draggable.offset();
        var dPos = $(this).offset();

        // Pixxel value of positions
        var elementTopPosition = pos.top - dPos.top;
        var elementLeftPosition = pos.left - dPos.left;

        console.log(elementTopPosition);
        console.log(elementLeftPosition);

        $("#video1").css("max-width", elementLeftPosition);
        $("#video1").css("max-height", elementTopPosition);
        $("#video1").css("overflow", "hidden");
        $("#video1").css("z-index", "100");

        // Getting parent element height and width
        var parentWidth = jQuery("#droppable").width();
        var ParentHeight = jQuery("#droppable").height();

        // Coverting to percentage
        var topInPercentage = (100 * elementTopPosition) / ParentHeight;
        var leftInPercentage = (100 * elementLeftPosition) / parentWidth;

        $("#draggable").css({top: topInPercentage + '%', left: leftInPercentage + '%'});

      }
    });

HTML

    <div class="mediaplayer">
      <video id="video1">
          <source src="http://html5videoformatconverter.com/data/images/happyfit2.mp4" type="video/mp4" />
      </video>
      <div id="droppable">
        <div id="draggable">Barre</div>
      </div>
      <video id="video2">
         <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
      </video>
    </div>

CSS

    .mediaplayer video, .mediaplayer .polyfill-video {
       position: absolute;
       top: 0;
       left: 0;
       height: 180px;
       width: 320px;
    }
    #draggable {
       width: 320px;
       padding: 2px 5px;
       cursor: pointer;
       color: #000;
       z-index: 100;
    }
    #droppable {
       position: relative;
       width: 320px;
       height: 180px;
       padding: 10px;
       z-index: 100;
    }

Answer 1

我觉得使用 Draggable 和 Droppable 对你不利。这是使用 Slider 的解决方案:

示例

https://jsfiddle.net/Twisty/1co0x58v/13/

HTML

<div class="player">
  <div id="barre"></div>
  <div class="mediaplayer">
    <video id="video1">
      <source src="http://html5videoformatconverter.com/data/images/happyfit2.mp4" type="video/mp4" />
    </video>
    <video id="video2">
      <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
    </video>
  </div>
  <table>
    <tr>
      <th>Time</th>
      <td>
        <input class="time-slider" type="range" disabled value="0" step="any" />
      </td>
    </tr>
    <tr>
      <td>
        <input value="Play" type="button" class="play" />
      </td>
    </tr>
    <tr>
      <td>
        <input value="Stop" type="button" class="pause" />
      </td>
    </tr>
    <tr>
      <th>Mute</th>
      <td>
        <input class="muted" type="checkbox" />
      </td>
    </tr>
    <tr>
      <th>Volume</th>
      <td>
        <input class="volume-slider" type="range" value="1" max="1" step="0.01" />
      </td>
    </tr>
  </table>
</div>

CSS

.player {
  margin: auto;
  padding: 10px;
  width: 320px;
  max-width: 900px;
  min-width: 320px;
}

.mediaplayer {
  position: relative;
  height: 0;
  width: 320px;
  padding-bottom: 56.25%;
  overflow: hidden;
}

.mediaplayer video,
.mediaplayer .polyfill-video {
  position: absolute;
  top: 0;
  left: 0;
  height: 180px;
  width: 320px;
}

.mediaplayer video#video1 {
  top: -180px;
  z-index: 100;
}

#barre {
  height: 160px;
  float: left;
  margin-top: 10px;
  margin-left: -20px;
}

jQuery

$("#barre").slider({
  orientation: "vertical",
  range: "min",
  min: 0,
  max: 180,
  value: 180,
  slide: function(event, ui) {
    var offset = 180;
    if (ui.value == 0) {
      $("#video1").css("top", "0px");
    } else {
      $("#video1").css("top", "-" + ui.value + "px");
    }
  }
});

这利用了绝对定位和top值。由于 mediaplayer 的高度为 180px，因此我通过将其移至溢出(已隐藏)来隐藏 video1。当 slider 从顶部向下移动时，它从值 180 开始下降。这使我可以轻松地上下滑动 video1。

更新

同样，我仍然认为 Slider 是更好的方法。看到你的更新后，我创建了这个:

http://jsfiddle.net/Twisty/1co0x58v/25/

HTML

<div class="mediaplayer">
    <div id="barre"></div>
    <div class="viewport">
      <video id="video1" autoplay>
        <source src="https://3dprintmaker.com/perso/video2.mp4" type="video/mp4" />
      </video>
    </div>
    <video id="video2" autoplay>
      <source src="https://3dprintmaker.com/perso/video1.mp4" type="video/mp4" />
    </video>
  </div>

CSS

.viewport {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.mediaplayer video,
.mediaplayer .viewport video,
.mediaplayer .polyfill-video {
  position: absolute;
  top: 0;
  left: 0;
  height: 180px;
  width: 320px;
}

#barre {
  height: 0px;
  width: 320px;
  margin-left: 15px;
}

#barre .ui-slider-handle {
  background-image: url("https://3dprintmaker.com/perso/player/barre.jpg");
  background-color: #6d6d6d;
  background-repeat: no-repeat;
  background-position: center center;
  width: 15px;
  height: 185px;
}

jQuery

$("#barre").slider({
    orientation: "horizontal",
    range: "min",
    min: 0,
    max: 320,
    value: 160,
    slide: function(e, ui){
    $(".viewport").css("width", (ui.value + 7) + "px");
    }
  });

为了实现您所寻找的目标，我使用 viewport 类创建了一个包装 div，它成为 video1 的可视区域。允许溢出并隐藏。因此，现在我们要做的就是调整视口(viewport)的宽度，video1 将显示为覆盖 video2。

为了制作句柄，我们只使用一些 CSS。根据需要设置 handle 的宽度和高度，并为其指定您喜欢的图像背景。