0

Estoy utilizando Dragula.js para mover los elementos que dicen clase, todo funciona bien en la primer sección, pero ya en la segunda no funciona. También me interesa saber como puedo hacer que se guarde la posición a la que se movió el elemento, espero que me puedan ayudar con mis problemas :), gracias de antemano.

introducir la descripción de la imagen aquí

Y mi código HTML (El otro contenedor de la sección contiene el mismo código):

<div class="seccion" id="seccion">
                    <div class="contenido-seccion">
                        <h3 class="titulo-seccion"><b>Sección 1:</b> Ejemplo</h3>
                        <div class="acciones">
                            <a href="#" data-toggle="tooltip" data-placement="top" title="Editar Sección"><i class="material-icons-round">edit</i></a>
                            <a href="#" data-toggle="tooltip" data-placement="top" title="Remover Sección"><i class="material-icons-round">remove_circle</i></a>
                            <a href="#" class="mover-seccion" data-toggle="tooltip" data-placement="top" title="Mover Sección"><i class="material-icons-round icono-mover-seccion">format_list_numbered</i></a>
                        </div>
                    </div>

                    <div class="contenedor-clases container" id="contenedor-clases">
                        <div class="clase" id="clase">
                            <div class="contenido-clase">
                                <h4 class="titulo-clase"><b>Clase 1:</b> Ejemplo de clase</h4>
                                <div class="acciones">
                                    <a href="#" data-toggle="tooltip" data-placement="top" title="Editar Clase"><i class="material-icons-round">edit</i></a>
                                    <a href="#" data-toggle="tooltip" data-placement="top" title="Remover Clase"><i class="material-icons-round">remove_circle</i></a>
                                    <a href="#" class="mover-clase" data-toggle="tooltip" data-placement="top" title="Mover Clase"><i class="material-icons-round icono-mover-clase">format_list_numbered</i></a>
                                    <a href="#" class="agregar-contenido" data-toggle="tooltip" data-placement="top" title="Agregar Contenido"><i class="material-icons-round">add</i></a>
                                </div>
                            </div>
                        </div>                            
                        <a href="#" class="clase agregar-clase">
                            <i class="material-icons-round">add</i> Agregar Clase
                        </a>
                    </div>
                </div>

Y el de JS:

dragula([document.getElementById("contenedor-clases")], {
    moves: function (el, container, handle) {
        return handle.classList.contains('mover-clase') || handle.classList.contains('icono-mover-clase');
    }
});

1 respuesta 1

0

encontré una respuesta que me solucionó el problema pero me creó otro, ahora no solo puedo mover desde el icono para mover, ahora desde cualquier parte del div e puede mover, como lo puedo solucionar?

var clases = $('.contenedor-clases').map(function () {
    return this;
}).get();

dragula(clases), {
    moves: function (handle) {
        return handle.classList.contains('mover-clase') || handle.classList.contains('icono-mover-clase');
    }
};

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.