tengo 2 listas e intento hacer que al mover un item de la derecha hacia la izquierda se "clone" (eso funciona)
Pero me gustaria que pudiera poner un item entre varios. Es decir si tengo creado "item1" y "item2", poder poner el "item3" entre estos dos.
Para ello tengo este código
$(document).ready(function () {
$("h1").click(function () {
$("#emp_list").slideToggle("500");
});
$("#emp_list li").draggable({
helper: "clone",
revert: 'invalid',
opacity: "0.5"
});
$("#Potential_Assignee").droppable({
accept: $("#emp_list li"),
hoverClass: "dropHover",
drop: function (ev, ui) {
$(this).find(".replace_me").remove();
var me = ui.draggable.clone()
me.appendTo(this)
.addClass("newClass");
}
})
});
#employee {
float:left;
border: 2px solid #000;
width: 400px;
margin-right: 2em;
background: linen;
}
#Potential_Assignee {
float: left;
width: 400px;
margin-top: 1 em;
background:BlanchedAlmond;
border: 2px solid #000;
}
.result_header {
border-style: double;
border-radius: 1px;
border-color: black;
}
#emp_list {
position: relative;
}
a {
text-decoration: none;
color: black;
}
.newClass {
border: 1px solid black;
background-color: #9eebcf;
padding: 0 5px 5px 5px;
color: blue;
list-style-position:inside;
}
ol {
list-style: none;
opacity: 0.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Potential_Assignee">
<h3 class="result_header">Formulario</h3>
<div class="content">
<ol>
<li class="replace_me">Drag the names</li>
</ol>
</div>
</div>
<div id="employee">
<h3 class="result_header"><a href = "#">Acciones</a></h3>
<div id="emp_list">
<ul>
<li data-id="1">Texto</li>
<li data-id="2">Foto</li>
<li data-id="3">Firma</li>
</ul>
</div>
</div>