Javascript 使用Jquery问题垂直重新排序div

在我把最后一根头发撕下来之前，我要做最后的请求。目前，我正在展示最初的2个div。然后，用户可以根据需要多次将这两个div添加到原始div下面。如有必要，他们也可以拆下2个div。我试图允许重新排序的div使用拖放。我尝试了很多方法，但都没能奏效。另外需要注意的是，一旦用户拖放了div，div就需要重新编制自己的索引。这是我的代码。请考虑到，在确定这个基本实现之前，我已经添加和删除了很多代码尝试。提前谢谢

加载JQuery

向最终用户显示第一个div

+添加下一步

此代码附加了新的div。我必须把三个div放在一个div中，就像上面那样，但是我不能让它工作

<!--Script to append/remove div when user clicks on add_answer_step_button-->
<script type = "text/javascript" language = "javascript">

    $(document).ready(function() {
        <!--This variable gives each new set of answer divs a unique id by appending a number to the end of th id-->
        <!--The first set of answer divs will have an id of zero-->
        var answer_identifier_number = 1;
        $("button.add_answer_step_button").click(function () {
            $("div.answer_steps").append('<div id="answer_step_equation' + answer_identifier_number + '" class="answer_step_equation" contenteditable="true" placeholder="Enter The Next Solution Step This Question"></div>');
            $("div.answer_steps").append('<div id="answer_step_description' + answer_identifier_number + '" class = "answer_step_description" contenteditable="true" placeholder="Enter A Description as to how this step was reached or how to solve the next step"></div>');
            $("div.answer_steps").append('<button id="remove_answer_step_button' + answer_identifier_number + '" class = "remove_answer_step_button">- Remove This Step</button>');

            answer_identifier_number++;
        });
    });

</script>

$（文档）.ready（函数（）{
var应答\u标识符\u编号=1；
$（“按钮。添加答案\步骤\按钮”）。单击（函数（）{
$（“div.answer_steps”）。附加（“”）；
$（“div.answer_steps”）。附加（“”）；
$（“div.answer_步骤”）。追加（'-删除此步骤'）；
回答_标识符_编号++；
});
});

让div可以拖动

$（函数（）{
$（“#回答步骤”）.sortable（）；
$（“#回答步骤”）.disableSelection（）；
光标：移动；
});

---

我还没有想出如何重新索引的名称，但我有这方面的经验，所以我应该是好的。谢谢你的帮助。

好的，在你把头发撕下来之前，先看看这把“拖拽”小提琴——这是我之前做的一把——它会让你了解整个拖拽的工作原理——瑞秋·加伦2天前

这把小提琴上的HTML

<div class="common">
<div class="container-fluid">
    <div class="row">
            <ul class="col-sm-3 col-md-2 sidebar nav nav-sidebar" >
            <li class="group" class="draggable" ><a href="#" class="list-group-item">
            <h4>
             dsad
             <br /><small>dsadsa</small>
             <br /><small>dsadsa</small>
            </h4>
          </a>
                </li>
                <li class="group" class="draggable"><h2>
                BAH
                </h2><br><small>hello</small>
            </ul>
         <div id="drophere" class="col-sm-9 col-md-9">MAIN PANEL</div>
    </div>
</div>

$(".draggable").draggable();
var draggableArguments={
 revert: 'invalid',
 helper:'clone',
 appendTo: '#drophere',
 refreshPositions: true,
 containment: 'DOM',
 zIndex: 1500,
 addClasses: false
};

$('.group').draggable(draggableArguments);
$('.group').droppable();

$(".nav-sidebar").droppable({
 tolerance: "intersect",
 accept: ".group",
 activeClass: "ui-state-default",
 hoverClass: "ui-state-hover",
 drop: function(event, ui) {
    $(".nav-sidebar").append($(ui.draggable));
  }
});
$('#drophere').droppable({
 tolerance: "intersect",
 accept: ".group",
 activeClass: "ui-state-default",
 hoverClass: "ui-state-hover",
 drop: function(event, ui) {        
    $('#drophere').append($(ui.draggable));
  }
});
$('#drophere').sortable();

这把小提琴的CSS

.draggable {
  border: solid 2px gray;
}
.sidebar {
  position:fixed;
  width:200px;
  top: 51px;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: block;
  padding: 20px;
  overflow-y: auto;
  /* Scrollable contents if viewport is shorter than content. */
  overflow-x: visible;
  background-color: #f5f5f5;
  white-space: nowrap;
  border-right: 1px solid #eee;
  padding-left: 30px;
  padding-right: 30px;
}
/* Sidebar navigation */
.nav-sidebar {
  width:200px;
  height:100vh;
  margin-right: -21px;
  /* 20px padding + 1px border */
  margin-bottom: 20px;
  margin-left: -20px;
}
.group{width:150px;
  height:auto;
}

#drophere{width:700px;left:200px; height:100vh;}

---

你能用小提琴来证明它不起作用吗。您提供的代码似乎缺少一些片段。我在这里添加了一个JSFIDLE感谢Hanks Rachel，我现在已经完成了一半（一切都是可拖放的grrrr。拖放的编码方法仍然让我完全无法理解，这在正常情况下是不会发生的。我会在明天晚上有时间和睡眠的时候再试一次。再次感谢您的快速响应。让它工作了@RachelGallenThanks@rachel-gallan大家好我一直在用Rachel的密码并将其合并到我的代码中，但我无法使其工作。这是添加和删除div的提琴。我尝试了许多基于Rachel代码的方法，但我觉得我已经没有选择了，但基于此评论中的提琴再次请求您的帮助。再次感谢您的帮助。另外，我在这个阶段几乎秃顶/道歉她是瑞秋。我还在学习诀窍。我没有收到任何电子邮件。我以后会更加小心，采纳你的建议。谢谢你提供上述解决方案。

$(".draggable").draggable();
var draggableArguments={
 revert: 'invalid',
 helper:'clone',
 appendTo: '#drophere',
 refreshPositions: true,
 containment: 'DOM',
 zIndex: 1500,
 addClasses: false
};

$('.group').draggable(draggableArguments);
$('.group').droppable();

$(".nav-sidebar").droppable({
 tolerance: "intersect",
 accept: ".group",
 activeClass: "ui-state-default",
 hoverClass: "ui-state-hover",
 drop: function(event, ui) {
    $(".nav-sidebar").append($(ui.draggable));
  }
});
$('#drophere').droppable({
 tolerance: "intersect",
 accept: ".group",
 activeClass: "ui-state-default",
 hoverClass: "ui-state-hover",
 drop: function(event, ui) {        
    $('#drophere').append($(ui.draggable));
  }
});
$('#drophere').sortable();

.draggable {
  border: solid 2px gray;
}
.sidebar {
  position:fixed;
  width:200px;
  top: 51px;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: block;
  padding: 20px;
  overflow-y: auto;
  /* Scrollable contents if viewport is shorter than content. */
  overflow-x: visible;
  background-color: #f5f5f5;
  white-space: nowrap;
  border-right: 1px solid #eee;
  padding-left: 30px;
  padding-right: 30px;
}
/* Sidebar navigation */
.nav-sidebar {
  width:200px;
  height:100vh;
  margin-right: -21px;
  /* 20px padding + 1px border */
  margin-bottom: 20px;
  margin-left: -20px;
}
.group{width:150px;
  height:auto;
}

#drophere{width:700px;left:200px; height:100vh;}