jquery - 将一个 `div` 无边框的分成两半，并以 `Z` 的方式为掉落的 div 提供索引

标签 jquery html css

我正在创建一个动态表单，其中有一个 ul 和一个空的 div。用户必须从 ul 中拖出一个 li 并将其放入那个空的 div 中。现在我已经做了，空的 div 被分成两半。用户可以放入两者。拖放的 div 是可排序的。也可以在这些 div 之间进行排序。这是我尝试过的方式:

$('document').ready(function () {
  $(document).on('mousedown mouseup', '.grabbing, .grab', function(event) {
    $(this).toggleClass('grabbing').toggleClass('grab');
  });

  $('.side_bar_element').draggable({
    connectToSortable: ".wrapper",            
    helper: "clone",
    opacity: 0.55,
    zIndex: 100,
    stop: function(event, ui) {
      cursor: "grabbing"
    }
  });

  $(".wrapper").sortable({
    connectWith: ".connectedSortable",
    start: function(event, ui) {
      ui.item.startPos = ui.item.index();
    },
    stop: function(event, ui) {
      cursor: "grabbing"        
      console.log("Start position: " + ui.item.startPos);
      console.log("New position: " + ui.item.index());
    }
  }).disableSelection();

});
ul.side_bar li{
  list-style: none; 
  display: block;
  margin-top: 10px;
  font-size: 1.2em;
  display: block;
  padding: 5px;
  text-align: center;
  background-color: #53D4F3;
}

#right-box .preview, #left-box .content {
  display: none;
}
#right-box .content, #left-box .preview {
  display: block;
}

.wrapper{
  min-height: 400px;                   
  background-color: rgba(154, 210, 148, 1);
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;
  column-count: 3;

}
.grab {
  cursor: hand;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
.grabbing {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

.content{
  border: 1px dashed #CCC;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;
}

#left{
  border: 1px solid #111;
  height: 300px;
}
#right{
  border: 1px solid #111;
  height: 300px;
}
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></scrip‌​t>

</script>
    <ul class="side_bar">
      <li id="left-box" class="side_bar_element grab">
        <div class="preview">Item 1 (drag me)</div>
        <div class="content"><input type="text" class="form-control" style="height: 20px;"></div>
      </li>
      <li id="left-box" class="side_bar_element grab">
        <div class="preview">Item 2 (drag me)</div>
        <div class="content"><input type="text" class="form-control" style="height: 20px;"></div>
      </li>
      <li id="left-box" class="side_bar_element grab">
        <div class="preview">Item 3 (drag me)</div>
        <div class="content"><input type="text" class="form-control" style="height: 20px;"></div>
      </li>
    </ul>
    <br>Please drag the elements to this box<br>
    <!-- the right box wrapper for dropped elements-->
    <div id="right-box wrapper">
      <div id="left" class="wrapper connectedSortable" style="float:left; width: 50%">
      </div>
      <div id="right" class="wrapper connectedSortable" style="float:right; width: 50%">
      </div>
    </div>

不，这是它的样子: enter image description here

现在，每个 div 都有一个动态创建的 div。左侧 div 中删除的 div 的索引为 0、1、2，左侧 div 中删除的 div 的索引为 0 和 1。对我来说，我想要的是，两侧删除的 div 的索引应该连续，例如， 0, 1, 2, 3.. Z 类型。喜欢，

This is how it is now:
___________________________________

(main div)
 | div1(index-0) | div2(index-0) |
 | div1(index-1) | div2(index-1) |
 | div1(index-2) | div2(index-2) |
 | div1(index-2) | div2(index-3) |
___________________________________

This is how I want.


   ___________________________________
    (main div)
    | div1(index-0) | div2(index-1) |
    | div1(index-2) | div2(index-3) |
    | div1(index-4) | div2(index-5) |
    | div1(index-6) | div2(index-7) |
    ___________________________________

我该怎么做？有办法吗？

最佳答案

请为您的代码包含最新的 Jquery 和 Jquery Ui..

使用这两个链接代替之前的库。

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

在 snippest 中查看您的问题的解决方案。

$('document').ready(function () {
  $(document).on('mousedown mouseup', '.grabbing, .grab', function(event) {
    $(this).toggleClass('grabbing').toggleClass('grab');
  });

  $('.side_bar_element').draggable({
    connectToSortable: ".wrapper",            
    helper: "clone",
    opacity: 0.55,
    zIndex: 100,
    stop: function(event, ui) {
      cursor: "grabbing"
    }
  });

  $(".wrapper").sortable({
    connectWith: ".connectedSortable",
    start: function(event, ui) {
      ui.item.startPos = ui.item.index();
    },
    stop: function(event, ui) {
      cursor: "grabbing"        
      console.log("Start position: " + ui.item.startPos);
      console.log("New position: " + ui.item.index());
    }
  }).disableSelection();

});
ul.side_bar li{
  list-style: none; 
  display: block;
  margin-top: 10px;
  font-size: 1.2em;
  display: block;
  padding: 5px;
  text-align: center;
  background-color: #53D4F3;
}

#right-box .preview, #left-box .content {
  display: none;
}
#right-box .content, #left-box .preview {
  display: block;
}

.wrapper{
  min-height: 400px;                   
  background-color: rgba(154, 210, 148, 1);
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;
  column-count: 3;

}
.grab {
  cursor: hand;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
.grabbing {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

.content{
  border: 1px dashed #CCC;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;
}

#left{
  border: 1px solid #111;
  height: 300px;
}
#right{
  border: 1px solid #111;
  height: 300px;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<ul class="side_bar">
      <li id="left-box" class="side_bar_element grab">
        <div class="preview">Item 1 (drag me)</div>
        <div class="content"><input type="text" class="form-control" style="height: 20px;"></div>
      </li>
      <li id="left-box" class="side_bar_element grab">
        <div class="preview">Item 2 (drag me)</div>
        <div class="content"><input type="text" class="form-control" style="height: 20px;"></div>
      </li>
      <li id="left-box" class="side_bar_element grab">
        <div class="preview">Item 3 (drag me)</div>
        <div class="content"><input type="text" class="form-control" style="height: 20px;"></div>
      </li>
    </ul>
    <br>Please drag the elements to this box<br>
    <!-- the right box wrapper for dropped elements-->
    <div id="right-box wrapper">
      <div id="left" class="wrapper connectedSortable" style="float:left; width: 50%">
      </div>
      <div id="right" class="wrapper connectedSortable" style="float:right; width: 50%">
      </div>
    </div>

注意:请先包含 Jquery，然后包含 Jquery Ui。

关于jquery - 将一个 `div` 无边框的分成两半，并以 `Z` 的方式为掉落的 div 提供索引，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40779399/

上一篇：javascript - 如何将进度圈限制在 60 而不是 100% 以内

下一篇：css - 如何对 CSS 颜色属性的更改进行语义版本控制

相关文章：

javascript - 如何使用javascript更改图像的高度和宽度

css - 使用滚动条使内容 100% 高度

jquery - 如果在外部单击则隐藏/切换

javascript - 谷歌地图不正确的 UI 显示， map 也有一些偏移

html - Div AutoResize(好像它是空的)

css - 使用继承或某物制作方形 div？ (没有js)

jquery - 如何立即执行函数？

jQuery 检查元素是否包含任何属性

javascript - 确定 Canvas 大小何时调整

html - 有没有办法将导航栏中 li 下的下拉菜单居中？

©2024 IT工具网  联系我们