如何使用Jquery移动溢出div内的元素？

我正在尝试使用Jquery命令移动溢出div内的元素。在这里，我附上了图像。如何使用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与哪个参考？我很想最终把实施的功能放到按钮（紫色箭头）上。

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

来源

2017-02-11 Sungpah Lee

使用html部分的引导程序？ – Ayan

这是大约你在找什么？ https://jsfiddle.net/0qtjj04m/1/ – Ayan

嗨，阿燕，不要。你的jsfiddle只是用红色框表示虚线框。当你看到我的问题时，我已经在里面放满了红色的盒子。当用户向下滚动/向上时，视图向左/向右移动。我希望它使用jQuery来做到这一点。通过这样做，用户将点击按钮使视图向左/向右移动。 –

让我们先从一个解决方案的概要：

当用户点击移动按钮（mousedown），启动程序滚动，在缓慢的速度，内部窗格的右端。
当用户停止按住鼠标键（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），看看它是怎么工作。

来源

2017-02-11 15:39:57 hashchange

This正是我想要实现的！OMG Awesome !!!非常感谢！ –

如何使用Jquery移动溢出div内的元素？

回答

相关问题