侧边栏推送不起作用

Question

我有下面的侧边栏，它应该做的是当它打开时，它会将项目推到一边，但它不起作用。这是我的代码：

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}

#div1, #div2, #div3, #div4 {
 float: left;
    width: 55px;
    height: 55px;
    margin: 10px;
    border: 1px solid black;
}

body {
    font-family: "Lato", sans-serif;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">

  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDBBSFnyl2fRlVY1ct1E6t5rUIFsu8JWmKeTrS9o1nnTigCOfI2g" draggable="true" ondragstart="drag(event)" id="drag1" width="55" height="55">

</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
  <a href="#">Item 3</a>
  <a href="#">Item 4</a>
</div>

<div id="main">
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
</div>

不过，我的代码不会将 div 和 image 推到一边。我该怎么做？

Answer 1

图像和 div 没有被侧边栏推送，因为您将 margin-left 应用到 #main，并且 images/divs 存在于 #main 之外.要么将这些元素放在 #main 内，要么将边距应用到 body 而不是

Answer 2

目前您的图片不在 #main 元素中。为了获得您想要的运动，最好将所有 "moving" 内容包装在一个 "containing" 元素中，然后对其应用更改。

这里我们使用 #wrapper 除了菜单之外的所有内容，然后设置 width:100% 并关闭 body 上的 overflow-x，这样当我们按下时我们就不会得到横向滚动条出现

HTML

<div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
    <a href="#">Item 3</a>
    <a href="#">Item 4</a>
</div>
<div id="wrapper">
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">

        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDBBSFnyl2fRlVY1ct1E6t5rUIFsu8JWmKeTrS9o1nnTigCOfI2g" draggable="true" ondragstart="drag(event)" id="drag1" width="55" height="55">

    </div>

    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    <div id="main">
        <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
    </div>
</div>

CSS

#div1,
#div2,
#div3,
#div4 {
    float: left;
    width: 55px;
    height: 55px;
    margin: 10px;
    border: 1px solid black;
}

body {
    font-family: "Lato", sans-serif;
    overflow-x:hidden;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav a:hover,
.offcanvas a:focus {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

#wrapper {
    width:100%;
    transition: padding-left .5s;
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }
    .sidenav a {
        font-size: 18px;
    }
}

JS

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("wrapper").style.paddingLeft = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("wrapper").style.paddingLeft = "0";
}

JSFIDDLE

不过，作为个人喜好（为了防止菜单项闪烁 width/wrapping 换行），我建议保持菜单的宽度一致，并更改其 left 样式属性将其移入和移出 body 的视图，如 this fiddle.

侧边栏推送不起作用

Sidebar Push Not Working

html

javascript