Реализуйте Drag & Drop для меню боковой панели

Question

У меня есть 2 вертикальных деления: левая и центральная панель.

Я использую левый div как меню боковой панели, и я хотел бы реализовать перетаскивание для перемещения левой боковой панели на новую правую боковую панель (для перемещения меню слева направо).

Когда пользователь начинает перетаскивать, я хотел бы показать, где можно опустить панель (поэтому мне нужно показать пустую боковую панель справа), а когда пользователь опускает панель слева направо, мне нужно скрыть левая панель. Та же ситуация, когда пользователь начинает перетаскивать панель справа налево.

Я видел несколько возможных способов реализовать это с помощью пользовательского интерфейса jQuery или непосредственно DnD, интегрированного в HTML5 ( пример ).

Знаете ли вы, какое из них является лучшим решением (а также скорость его реализации)?

Я думаю, что для того, чтобы получить именно то, что я хочу (также с показом / скрытием трех панелей), мне нужно написать какой-нибудь код.

Answer 1

Вот пример с анимацией: https://jsfiddle.net/Twisty/jf6urpep/

Поскольку вы не предоставили пример HTML, сценария или концепции, я создал базовый пример.

HTML

<!-- Sidebar Left -->
<div class="sidebar-l" style="height:100%; position: relative;">
  <div class="w3-sidebar w3-light-grey w3-bar-block" style="width:25%; position: absolute;">
    <h3 class="w3-bar-item">Menu</h3>
    <a href="#" class="w3-bar-item w3-button">Link 1</a>
    <a href="#" class="w3-bar-item w3-button">Link 2</a>
    <a href="#" class="w3-bar-item w3-button">Link 3</a>
  </div>
</div>
<!-- Sidebar Right -->
<div class="sidebar-r" style="margin-left: 75%; width:0; height:100%; position: relative;">
</div>
<!-- Page Content -->
<div class="content" style="margin-left:25%">
  <div class="w3-container w3-teal">
    <h1>My Page</h1>
  </div>
  <img src="https://www.w3schools.com/w3css/img_car.jpg" alt="Car" style="width:100%">
  <div class="w3-container">
    <h2>Sidebar Navigation Example</h2>
    <p>The sidebar with is set with "style="width:25%".</p>
    <p>The left margin of the page content is set to the same value.</p>
  </div>
</div>

JavaScript

$(function() {
  $(".w3-sidebar").draggable({
    handle: "h3.w3-bar-item",
    drag: function(e, ui) {
      if (ui.position.left > $(window).width() / 2) {
        $(".sidebar-l").css({
          "width": 0
        });
        $(".sidebar-r").css({
          "width": "25%"
        });
        $(".content").css({
          "margin-left": 0,
          "margin-right": "25%"
        });
      } else {
        $(".sidebar-l").css({
          "width": "25%"
        });
        $(".sidebar-r").css({
          "width": 0
        });
        $(".content").css({
          "margin-left": "25%",
          "margin-right": 0
        });
      }
    },
    stop: function(e, ui) {
      var side, pos, center;
      pos = ui.position;
      center = $(window).width() / 2;
      console.log(pos, center);
      if (pos.left > center) {
        side = "r";
      } else {
        side = "l";
      }
      console.log("target", side);
      var sidebar = $(".w3-sidebar").detach();
      console.log("detach", sidebar);
      sidebar.appendTo($(".sidebar-" + side)).position({
        my: "left top",
        at: "left top",
        of: $(".sidebar-" + side),
        using: function(css, calc) {
          $(this).animate(css, "fast");
        }
      })
      console.log("append to", $(".sidebar-" + side));
    }
  });
  $("h3.w3-bar-item").disableSelection();
});

В зависимости от того, куда перетаскивается элемент, мы меняем место на полях. Это помогает указать пользователю, где боковая панель приземлится. Пользователь может в основном сбросить боковую панель с любой стороны, и она зафиксируется в своем положении.

Надеюсь, это поможет.

Answer 2

Psuedo-код на основе вашего примера ссылки:

1. Поместите оба элемента боковой панели в HTML как sidebar sidebar--left и sidebar sidebar--right
2. Заполните один фактическим содержанием боковой панели.
3. Добавьте класс sidebar--hidden к другому. Стиль, чтобы скрыть элемент.
4. В dragstart удалите класс sidebar--hidden и добавьте класс к обеим боковым панелям, например sidebar--droppable. Украсьте их соответствующим образом
5. Вкл. drop, удалить sidebar--droppable с обоих и добавить sidebar--hidden к другому
6. Не забудьте разместить капли, которые не падают на боковую панель. Вы можете использовать dragend для этого случая и просто вернуть его туда, где он начал (или, возможно, проверить позицию и, если> 50%, сделать ее правой боковой панелью ...)

Хотя, если это действительно просто выбор между левой и правой боковыми панелями, возможно, проще иметь элемент управления типа кнопки / флажка на боковой панели и просто перемещать его в DOM при переключении (и при загрузке страницы через некоторый механизм сохранения) , Или установите обе боковые панели в DOM и переместите innerHTML. Если вы не используете отступы или границы самих элементов боковых панелей, они должны превратиться в скрытые, если у них нет содержимого.