javascript - 如何使用 Jquery 移动溢出的 div 中的元素？

Question

我正在尝试使用 Jquery 命令移动溢出的 div 中的元素。在这里我附上图片。

我附上了我要实现的图像。蓝色虚线框有一个红色框溢出蓝色框(父)。我希望使用 Jquery，红色框将在蓝色虚线框内移动。

        <div style="position:relative;">
          <div class="row" id='blue_box'
            style="overflow:scroll; overflow-y:hidden;
            width:100%; border:10px dotted blue;">
            <div id = 'red_box' class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
              style="display:flex;justify-content:space-around;
              width:90vw; max-width:1296px; height:32vw; margin:10px;
              border: 1px solid red;">
              <div style="width:80vw;
                height:32vw;
                border:10px solid transparent;
                max-height:467px;">
              content..I want to move red box that is overflowing within the blue box..
              </div>
            </div>
          </div>
        </div>

我该如何解决这个问题？如何将 scrollTop(?) 或 scrollRight 与哪个引用一起使用？我很想最终将实现的功能放到按钮上(紫色箭头)。

请与我分享您的见解!我很期待。

Answer 1

让我们从解决方案的大纲开始:

• 当用户点击移动按钮 (mousedown) 时，以低速启动程序滚动到内部 Pane 的右端。
• 当用户停止按住鼠标键 (mouseup) 时，停止编程滚动。
• 通过添加必要的事件使其也适用于触控设备。

与 jQuery.scrollable (我已经写过了)，这只是几行的问题。假设有一个滚动容器 #outer，以及左右移动的控件(#left 和 #right)，这是一个可行的解决方案:

$( function () {
  
  var $container = $( "#outer" ),
      $left = $( "#left" ),
      $right = $( "#right" ),
      $both = $left.add( $right ),
      
      opts = { duration: 2000 };
  
  $left.on( "mousedown touchstart pointerdown", function () {
    $container.scrollTo( "left", opts );
  } );
           
  $right.on( "mousedown touchstart pointerdown", function () {
    $container.scrollTo( "right", opts );
  } );
  
  $both.on( "mouseup touchend pointerup", function ()  {
    $container.stopScroll();
  } );
  
  // Controls are inside the scrolling area, so exclude them
  // from automatic detection of user interaction, see
  // https://github.com/hashchange/jquery.scrollable#exceptions-for-selected-elements
  $both.on( "mousedown touchstart pointerdown", function ( event ) { 
    event.stopPropagation(); 
  } );
  
} );

看看这个simplified demo ( code view ) 在工作中看到它。