Question

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

＆＃13;

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";
}

＆＃13;

#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;}
}

＆＃13;

<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>

＆＃13;

虽然，我的代码并没有将div和image推到一边。我怎么能这样做？

Answer 1

图片和div未被侧边栏推动，因为您正在向#main应用左边距，并且图像/ div存在于#main之外。将这些元素放在#main中或将边距应用于body而不是

Answer 2

目前您的图片不在#main元素内。为了获得你之后的运动，它最好包装你所有的＆＃34;移动＆＃34;含有＆＃34;含有＆＃34;的内容元素，然后将更改应用于它。

此处我们在除菜单之外的所有内容中使用#wrapper，然后设置width:100%并关闭身体上的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

虽然作为个人喜好（为了防止菜单项的闪烁更改宽度/换行到新行），我建议保持菜单的宽度一致，并将其left样式属性更改为将其移入和移出身体视图，如this fiddle。

边栏推不工作

2 个答案: