2

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>

1 respuesta 1

2

Ya que estás usando JQuery-UI podrías hacer que el listado al que arrastras seas ordenable, de esa manera aunque no se clonen exactamente donde quieres una vez clonado podrás ordenarlos.

También he retocado el donde clonabas los <li> ya que lo estaban haciendo fuera del <ol> que tenías preparado para ello.

$(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).find('.content ol'))
                        .addClass("newClass");
                }
            })
            
            $('#Potential_Assignee .content ol').sortable();

        });
#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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.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>

Referencia: sortable()

3
  • Muchas gracias @phpMyGuel es justo lo que estoy buscando. 1000 gracias
    – ilernet
    Commented el 11 sept. 2020 a las 13:59
  • Solo me falta que al mover un item (div izquierdo) me gustaría poder hacer doble click i editar-lo, esto en que evento debo hacerlo? gracias
    – ilernet
    Commented el 11 sept. 2020 a las 14:00
  • Sí, para eso tendrías que usar un evento ondblclick
    – phpMyGuel
    Commented el 11 sept. 2020 a las 16:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.