javascript - 为侧边栏菜单实现拖放

Question

我有 2 个垂直 div:左侧面板和中央面板。

我将左侧 div 用作侧边栏菜单，我想实现拖放操作以将左侧边栏移动到新的右侧边栏(将菜单从左侧移动到右侧)。

当用户开始拖动时，我想显示可以放置面板的位置(因此我需要显示右侧的空白侧边栏)以及当用户将面板从左侧拖放到右侧时我需要隐藏的目的地左侧面板。当用户开始从右面板拖动到左面板时，情况相同。

我已经看到一些可能的方法来使用 jQuery UI 或直接集成 HTML5 的 DnD(example)。

您知道哪个是最好的解决方案(以及实现速度)吗？

我想为了得到我想要的(也包括三个面板的显示/隐藏)，我需要写一些代码。你知道任何教程/示例非常接近我想做的吗？

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

根据元素被拖到哪里，我们交换哪一侧有边距空间。这有助于向用户指示侧边栏将落在何处。用户基本上可以将侧边栏放在任一侧，它会自动定位。

希望对您有所帮助。