Question

我对JS语言没有太多经验，但我正努力做到最好！

我想要制作名为“ Ferramentas ”的model of menu。

在我正在尝试的下面的代码中，我可以将菜单对象拖放到其他选项卡。但我不知道如何隐藏/显示并将其移动到任何类似的地方。

我正在使用bootstrap for tabs和jQuery进行拖放。

HTML

<html lang="en">
<head>
<title>workflow</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" />
<link rel="stylesheet" href="work.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="script.js"></script>

</head>

<body>
    <div class="tabbable">
        <h2>Nova Campanha</h2>
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#template">Templates</a></li>
                <li class=""><a data-toggle="tab" href="#livre">Livre</a></li>
            </ul>
        <div id="container2" class="panel-body tab-content">
            <div id="template" class="tab-pane active">
                <p>Configure sua campanha</p>
            </div>
            <div id="livre" class="tab-pane">
                <p>Monte sua campanha</p>
            </div>
        </div>
    </div>

    <div class="col-xs-3">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h1 class="panel-title">Ferramentas</h1>
        </div>
        <div id="container1" class="panel-body box-container">
          <div itemid="itm-1" class="btn btn-default box-item">Item 1</div>
          <div itemid="itm-2" class="btn btn-default box-item">Item 2</div>
          <div itemid="itm-3" class="btn btn-default box-item">Item 3</div>
          <div itemid="itm-4" class="btn btn-default box-item">Item 4</div>
          <div itemid="itm-5" class="btn btn-default box-item">Item 5</div>
        </div>
      </div>
    </div>


</body>

的script.js

$(document).ready(function() {

  $('.box-item').draggable({
    cursor: 'move',
    helper: "clone"
  });

  $("#container1").droppable({
    drop: function(event, ui) {
      var itemid = $(event.originalEvent.toElement).attr("itemid");
      $('.box-item').each(function() {
        if ($(this).attr("itemid") === itemid) {
          $(this).appendTo("#container1");
        }
      });
    }
  });

  $("#container2").droppable({
    drop: function(event, ui) {
      var itemid = $(event.originalEvent.toElement).attr("itemid");
      $('.box-item').each(function() {
        if ($(this).attr("itemid") === itemid) {
          $(this).appendTo("#container2");
        }
      });
    }
  });

});

work.css

.tabbable {
    margin: 10px;
    height: 600px;
    overflow: hidden;
    border-bottom: 1px solid #ccc;
}
.nav-tabs {
    margin: 0;
}

.tab-content {
    height: 100%; 
    border-left: 1px solid #ccc ; 
    border-right: 1px solid #ccc;
}
.box-container {
    height: 300px;
}

.box-item {
    width: 100%;
    z-index: 1000
}

请问各位，请您带一些类似上面显示的示例？或者给我一些关于什么是开始寻找这样的好地方的提示？

隐藏菜单中的对象并将其移动到任何位置

0 个答案: