Javascript 在拖动元素后更改值css属性

我有两个视频：视频1在视频2下面。当我移动可拖动元素时，我想显示视频1的一部分

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

摆弄图画的人：

摆弄视频：

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>

<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>

<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>

    <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>

---

我更喜欢用图片而不是文字来表示可拖动的元素

---

我更喜欢用图片而不是文字来表示可拖动的元素

---

我觉得使用Dragable和Dropable对你不利。下面是一个带有滑块的解决方案：

示例

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>

<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>

<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>

    <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>

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");
    }
  }
});

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

    $("#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");
        });
      }
    });

这利用了绝对定位和

top

值。由于

mediaplayer

的高度是

180px

，因此我将

video1

移动到溢出位置（隐藏）。当滑块从顶部向下移动时，其值从180开始下降。这使我可以轻松地上下滑动

video1

更新

同样，我仍然认为滑块是一种更好的方法。看到您的更新后，我创建了以下内容：

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>

<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>

<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>

    <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>

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");
    }
  }
});

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

    $("#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");
        });
      }
    });

为了实现您想要的功能，我使用类

viewport

创建了一个包装器div，它成为

video1

的可查看区域。允许并隐藏溢出。因此，现在我们所要做的就是调整视口的宽度，

video1

将显示为覆盖

video2

---

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

我觉得使用Dragable和Dropable对您不利。下面是一个带有滑块的解决方案：

示例

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>

<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>

<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>

    <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>

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");
    }
  }
});

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

    $("#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");
        });
      }
    });

这利用了绝对定位和

top

值。由于

mediaplayer

的高度是

180px

，因此我将

video1

移动到溢出位置（隐藏）。当滑块从顶部向下移动时，其值从180开始下降。这使我可以轻松地上下滑动

video1

更新

同样，我仍然认为滑块是一种更好的方法。看到您的更新后，我创建了以下内容：

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>

<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>

<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>

    <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>

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");
    }
  }
});

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

    $("#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");
        });
      }
    });

为了实现您想要的功能，我使用类

viewport

创建了一个包装器div，它成为

video1

的可查看区域。允许并隐藏溢出。因此，现在我们所要做的就是调整视口的宽度，

video1

将显示为覆盖

video2

---

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

谢谢您的帮助。我要去看你的测试。 就我而言，我前进了，我得到了我想要的结果，但我有一些错误

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>

<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>

<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>

    <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>

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");
    }
  }
});

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

    $("#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");
        });
      }
    });

---

谢谢你的帮助。我要去看你的测试。 就我而言，我前进了，我得到了我想要的结果，但我有一些错误

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>

<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>

<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>

    <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>

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");
    }
  }
});

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

    $("#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");
        });
      }
    });

---

---

可以进一步说明问题是什么，什么需要“发挥作用”。现在还不清楚到底是什么问题。谢谢，这很曲折。我想运行两个相同的视频，但哪一个有更多的效果。通过移动可拖动的元素，我想比较视频。这两个视频都是在前面可见的，还是拖动的动作会使第二个视频出现？这里面有什么不起作用？它们是如何水平、垂直排列的？仔细观察，我添加了

containment

这样的内容：这有助于将拖拽到一个合理的区域。这也意味着一个百分比的视频更好。谢谢，这很曲折，我喜欢你的小提琴。但问题是，当向下播放的视频出现时，她觉得它已满并调整了大小。我想知道如何在显示底部视频的一部分而不是全部时，不能调整视频大小并保持其原始大小。可以进一步说明问题所在，需要“工作”的内容。现在还不清楚到底是什么问题。谢谢，这很曲折。我想运行两个相同的视频，但哪一个有更多的效果。通过移动可拖动的元素，我想比较视频。这两个视频都是在前面可见的，还是拖动的动作会使第二个视频出现？这里面有什么不起作用？它们是如何水平、垂直排列的？仔细观察，我添加了

containment

这样的内容：这有助于将拖拽到一个合理的区域。这也意味着一个百分比的视频更好。谢谢，这很曲折，我喜欢你的小提琴。但问题是，当向下播放的视频出现时，她觉得它已满并调整了大小。我想知道如何在显示底部视频的一部分而不是全部时，无法调整视频的大小并保持其原始大小。此示例中的第二个视频是在sepia中的第一个视频。此示例中的第二个视频是在sepia中的第一个视频。您的小提琴非常好，非常曲折，再次感谢您的帮助。它几乎完成了，我尝试在拖动图片时调试该问题，但这很困难，而且在末端的可拖放区域有问题。jsfiddle.net/1co0x58v/22这与您在原始帖子中介绍的内容大不相同。你也可以像我建议的那样使用滑块。你甚至可以把标记做成那样大，这样它就可以把两个视频分开。我已经编辑了我的答案。我相信它回答了你的问题，我希望你能这样做。这正是我想要的，非常感谢。我很高兴你