none
¿Evitar el choque de 2 cuadros que contienen el efecto drag n' drop? RRS feed

  • Pregunta

  • Estoy realizando unos cuadros con efectos drag 'n drop los cuales se acomodan de acuerdo a la importancia que les da el usuario, el problema es que al posicionar los cuadros unos se van hasta abajo o en otros casos el cuadro se encima uno sobre otro.

    Me imagino que lo que se debe de modificar es el javascript.

    Espero me puedan ayudar.

    Saludos!

    ASP.NET

    <style>
                        #arrastrable1{
                            height: 70px;
                            padding: 5px;
                            margin: 5px;
                        }
                        #arrastrable1{
                            background-color: #CC0;
                        }
                    </style>
                    <script>
                        function empezar(e) {
                            e.dataTransfer.effectAllowed = 'move';
                            e.dataTransfer.setData("Data", e.target.getAttribute('id'));
                            e.dataTransfer.setDragImage(e.target, 0, 0);
                            return true;
                        }
                        function enter(e) {
                            return true;
                        }
                        function over(e) {
                            var esarrastrable = e.dataTransfer.getData("Data");
                            var id = e.target.getAttribute('id');
                            return false;
                        }
                        function drop(e) {
                            var esarrastrable = e.dataTransfer.getData("Data");
                            e.target.appendChild(document.getElementById(esarrastrable));
                            e.stopPropagation();
                            return false;
                        }
                    </script>
                    <div id="tareashoy" class="content" runat="server" ondragenter="return enter(event)" ondragover="return over(event)" ondrop="return drop(event)">

    </div>

    C#

    public void CargarTareasNuevo()
         {
             LnqDatosAdministracionDataContext datos = new LnqDatosAdministracionDataContext();
             string cargar_tareas = "";
             int id = Convert.ToInt32(Session["Usuario"]);
             var desc = CONSULTA
                        select gr;
             foreach(var item in desc)
             {
                 cargar_tareas += "<div id='arrastrable1' draggable='true' ondragstart='return empezar(event)' ondragend='return end(event)'>"+
                     "<p>"+item.nombre+"</p>"+
                     "</div>";
                 tareashoy.InnerHtml = cargar_tareas;
             }
         }


    Jordy Santamaria

    jueves, 26 de noviembre de 2015 16:17

Todas las respuestas

  • hola

    no evaluaste usar alguna libreria de jquery?

    Collision Detection - JSFiddle

    o sino algo como ser

    jQuery Overlaps

    analiza la demo de la libreria

    ---

    es mas el codigo que defines en CargarTareasNuevo() no es correcto, no se define html en el codigo servidor

    deberias usar json y crear el html dinamico usando jTemplate

    Working with JQuery Templates

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    jueves, 26 de noviembre de 2015 16:42
  • Hola muchas gracias, es que el problema es que al utilizar librerias JQuery la interfaz del sistema deja de funcionar por que utilizo el framework "Metro UI" para el front-end y es que desde el servidor inyecto codigo html para poder imprimir todos los nombres de las tareas como se ve en la imagen a continuacion, el problema es que a la hora de arrastrar los cuadros (por importancia del usuario) uno arriba o abajo del otro, a veces se terminan encimando, entonces todo el codigo script justamente en la misma etiqueta, sirve para hacer el efecto, solo quiero ver la forma de agregarle algo al script para hacer que esto no suceda, que se encimen y ver la forma de agregar el registro de del orden en el que lo deja el usuario, para que cuando vuelva abrir su sesion, se encuentren las tareas en el mismo orden que las dejo.

    <div class="panel collapsible collapsed" data-role="panel" id="panelTareasHoy" runat="server">
                        <div class="heading">
                            <img class="icon" src="images/location.png" />
                            <span class="title">Tareas que se tienen que cumplir hoy.</span>
                        </div>
                        <div id="tareashoy" class="content" runat="server" ondragenter="return enter(event)" ondragover="return over(event)" ondrop="return drop(event)">
    
    <script>
    	                function empezar(e) {
    	                    e.dataTransfer.effectAllowed = 'move';
    	                    e.dataTransfer.setData("Data", e.target.getAttribute('id'));
    	                    e.dataTransfer.setDragImage(e.target, 0, 0);
    	                    return true;
    	                }
    	                function enter(e) {
    	                    return true;
    	                }
    	                function over(e) {
    	                    var esarrastrable = e.dataTransfer.getData("Data");
    	                    var id = e.target.getAttribute('id');
    	                    return false;
    	                }
    	                function drop(e) {
    	                    var esarrastrable = e.dataTransfer.getData("Data");
    	                    e.target.appendChild(document.getElementById(esarrastrable));
    	                    e.stopPropagation();
    	                    return false;
    	                }
    	            </script>
    Espero haberme dado a entender.
    public void CargarTareasNuevo() 
         {
             LnqDatosAdministracionDataContext datos = new LnqDatosAdministracionDataContext();
             string cargar_tareas = "";
             //string llenarmodal = "";
             int id = Convert.ToInt32(Session["Usuario"]);
             var desc = CONSULTA;
             foreach(var item in desc)
             {
                 cargar_tareas += "<div id='Importante' draggable='true' ondragstart='return empezar(event)' ondragend='return end(event)'>"+
                     "<p>" + item.nombre + "</p>" +
                     "<a id='' href='#SaberMas'>Acerca de esta tarea...</a>"+
                     "</div>";
                 tareashoy.InnerHtml = cargar_tareas;
             }
    }


    Jordy Santamaria

    viernes, 27 de noviembre de 2015 15:06