I have 2 lists and I try to make it "clone" when moving an item from the right to the left (that works)
But I would like to be able to put an item among several. In other words, if I have created "item1" and "item2", I can put "item3" between these two.
For this I have this code
$(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>
Since you're using JQuery-UI you could make the list you drag to sortable, that way even if they don't clone exactly where you want once cloned you can sort them.
I've also tweaked where you cloned them
<li>
since they were doing it outside of the<ol>
one you had prepared for it.Reference: sortable()