拖动元素后更改值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

我首选使用图片而不是文字来表示可拖动的元素。

picture 1

picture 2

Answer 2

我觉得使用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隐藏到溢出（隐藏）中。当滑块从顶部向下移动时，它从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的可视区域。允许溢出并隐藏。因此，现在我们所要做的就是调整视口的宽度，video1将显示为覆盖video2。

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

Answer 3

感谢您的帮助Twisty。我要去看你的考试。 就我而言，我前进了，我获得了我希望的结果，但我有一些错误。

https://jsfiddle.net/1co0x58v/20/

<强> HTML

    <div class="player">
      <div class="mediaplayer">
         <div id="droppable">
            <video id="video1" autoplay>
               <source src="../video2.mp4" type="video/mp4" />
            </video>
            <div id="draggable"><img src="http://3dprintmaker.com/perso/player/barre.jpg" /></div>
         </div>
         <video id="video2" autoplay>
             <source src="../video1.mp4" type="video/mp4" />
         </video>
       </div>
     </div>

<强> CSS

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

<强>的jQuery

    $("#draggable").draggable({
       containment: "#video2"
    });

    jQuery("#droppable").droppable({
       drop: function(event, ui){
       debugger;
       $("#droppable").mousemove(function(e)
       {
          var calcul1 = e.pageX;
          var calcul2 = calcul1-15;
          $("#droppable").css("width", calcul1+"px");
          $("#droppable").css("overflow", "hidden");
          $("#droppable").css("z-index", "100");
          $("#draggable").css("left", calcul2+"px");
          $("#draggable").css("top", "0px");
        });
      }
    });