将一个`div`分成两半，没有任何边框，并以`Z‘的方式提供丢弃的div的索引

Question

我正在创建一个动态表单，其中有一个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>

​

不，它看起来是这样的：

​

现在，每个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) |
    ___________________________________

我该怎么做呢？有什么办法吗？

Answer 1

请在您的代码中包含最新的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。