Переупорядочить Divs по вертикали, используя JQuery Issue

Question

Я спрашиваю, в крайнем случае, прежде чем я разорву последние волосы. На данный момент я показываю начальные 2 div. Затем пользователь может добавить эти два div под оригиналом столько раз, сколько захочет. При необходимости они также могут удалить 2 div. Я пытаюсь разрешить запись divs, используя drage и drop. Я пробовал множество методов, но я просто не могу заставить его работать. В качестве дополнительного примечания, divs должны переиндексировать себя, как только пользователь перетащил и сбросил. Вот код, который у меня есть. Пожалуйста, примите во внимание, что я добавил и удалил много попыток кода, прежде чем останавливаться на этой базовой реализации. Заранее спасибо.

нагрузки JQuery

Показать первые ДИВ к конечному пользователю

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

Этот код добавляет новые дивы. Я должен поставить три 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> 

Позвольте дивы быть перетаскиваемым

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

Я не понял, как индексировать имена, но пока у меня есть опыт этой части, так что я должен быть в порядке. Спасибо за вашу помощь.

Answer 1

ОК, прежде чем вы отрывать волосы, взгляните на эту «перетащить» скрипку - ее один-один-я сделал раньше, чем один jsfiddle.net/RachGal/ahnx7kwc Это даст вам представление о том, как все перетащить и падение вещь работает - Рейчел Галлен 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> 

Javascript с этой скрипкой

$(".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-от этого 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;}