Как перемещать элементы, находящиеся в переполненном div с помощью JQuery?

Question

Я пытаюсь переместить элементы, находящиеся в переполненном div с помощью команды Jquery. Здесь я прикрепляю изображение.

Прилагаю образ того, что я пытаюсь реализовать. Синяя пунктирная коробка имеет красную рамку, которая переполняет синий квадрат (родительский). Я надеюсь, что красная коробка будет перемещаться в синей пунктирной коробке с 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), инициировать программный свиток, на медленной скорости, в правой части внутренней панели.
• Когда пользователь перестанет удерживать клавишу мыши (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), чтобы увидеть его на работе.