使用Jquery Issue垂直对Divs重新排序

Question

I'm asking as a last resort before I tear the last of my hair out. At the moment I am showing an initial 2 divs. The user can then add these two divs below the original as many times as they want. They can also remove the 2 divs if necessary. I am trying to allow reording of the divs using drage and drop. I've tried numerous methods but I just can't get it working. As an extra note, the divs need to reindex themselves once the user has dragged and dropped. Here is the code that I have. Please take into consideration that I have added and deleted lots of code attempts before settling on this basic implementation. Thanks in advance.

Load JQuery

Display first div to end user

            <!--Div contains each answer step-->
            <div id = "answer_step" class = "answer_step">
                <!--This placeholder text is styled from CSS and will empty the div once the user starts typing-->
                <div id="answer_step_equation0" class="answer_step_equation" contenteditable="true" placeholder="Enter The Next Solution Step This Question"></div>
                <div id="answer_step_description0" 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>

        </div>
<!-- Buttons to dynamically add and remove answer divs. The remove functionality is added in JQuery for the add button-->
        <button id="add_answer_step_button" class="add_answer_step_button">+ Add next Step</button>

This code appends the new divs. I have to put the three divs within a div like above but I can't get it to work.

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

Allow the divs to be draggable

<script type = "text/javascript" language = "javascript">
$(function() {  
    $( "#answer_steps" ).sortable();
    $( "#answer_steps" ).disableSelection();
    cursor: move;
});
</script>

I haven't figured out how to reindex the names yet but I have experience of that part so I should be fine. Thanks for your help.

Answer 1

ok, before you go tearing your hair out, have a look at this 'drag and drop' fiddle - its a heres-one-I made-earlier one jsfiddle.net/RachGal/ahnx7kwc It'll give you an idea about how the whole drag and drop thing works – Rachel Gallen 2 days ago

The HTML from this fiddle

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

The Javascript from this fiddle

$(".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();

The CSS from this Fiddle

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