Foros del Web » Programando para Internet » Jquery »

mantener formato zona draggable

Estas en el tema de mantener formato zona draggable en el foro de Jquery en Foros del Web. Buenas, tengo un par de problemas que no consigo resolver, es la primera vez que estoy usando Drag & Drop y me esta costando Tengo ...
  #1 (permalink)  
Antiguo 24/03/2014, 06:09
 
Fecha de Ingreso: febrero-2014
Mensajes: 17
Antigüedad: 7 años, 4 meses
Puntos: 1
mantener formato zona draggable

Buenas, tengo un par de problemas que no consigo resolver, es la primera vez que estoy usando Drag & Drop y me esta costando Tengo este codigo

Código:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
<style>
[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}
.row {
  height: 20px;
  width: 150px;
  float: left;
  border: 2px solid #666666;
  background-color: #ccc;
  margin-right: 5px;
  -webkit-border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 3px #000;
  -ms-box-shadow: inset 0 0px 3px #000;
  box-shadow: inset 0 0 3px #000;
  text-align: center;
  cursor: move;
   margin-bottom: 5px;
}
.column {
  height: 30px;
  width: 150px;
  float: left;
  border: 2px solid #666666;
  background-color: #ccc;
  margin-right: 5px;
  -webkit-border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 3px #000;
  -ms-box-shadow: inset 0 0 3px #000;
  box-shadow: inset 0 0 3px #000;
  text-align: center;
}
.column header {
  color: #fff;
  text-shadow: #000 0 1px;
  box-shadow: 5px;
  padding: 5px;
  background: -moz-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
  background: -webkit-gradient(linear, left top, right top,
                               color-stop(0, rgb(0,0,0)),
                               color-stop(0.50, rgb(79,79,79)),
                               color-stop(1, rgb(21,21,21)));
  background: -webkit-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
  background: -ms-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
  border-bottom: 1px solid #ddd;
  -webkit-border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -ms-border-radius-topleft: 10px;
  border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -ms-border-top-right-radius: 10px;
  -moz-border-radius-topright: 10px;
  border-top-right-radius: 10px;
  margin-bottom: 5px;
}
.droppable { 
    width: 90%; 
    height: 100px;
    float: left; 
    border:solid 5px gray;
    margin-left:5px;
}
</style>
</head>
<body>
<div id="columns">
  <div class="column" style='color:#E9122F'><header>Ejemplos</header>
  	<div class="row" draggable="true" value="ejemplos1">Ejemplos_1</div>
  	<div class="row" draggable="true" value="ejemplos2">Ejemplos_2</div>  	
  	<div class="row" draggable="true" value="ejemplos3">Ejemplos_3</div>	
  	</div>
  <div class="column"  style='color:#0B33E6'><header>Pruebas</header>
    <div class="row" draggable="true" value="pruebas1">Pruebas_1</div>
  	<div class="row" draggable="true" value="pruebas2">Pruebas_2</div>  	
  	<div class="row" draggable="true" value="pruebas3">Pruebas_3</div>
  </div>
  <div class="column" style='color:green'><header>Otros</header>
    <div class="row" draggable="true" value="otros1">Otros_1</div>
  	<div class="row" draggable="true" value="otros2">Otros_2</div>  	
  	<div class="row" draggable="true" value="otros3">Otros_3</div>
  </div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="droppable" class="droppable">
  <p>Drop here</p>
</div>
<div id="counter">
</div>
<script>
$(function () {
    var drg="";
    var a = "";
    $(".row").draggable({
        drag: function (event, ui) {
            drg = $(this);
            $("#droppable").droppable('enable');
        },
        helper: 'clone'
    });

    $("#droppable").droppable({
        drop: function () {

            a = a +drg.attr('value')+ " ";
          
            $("#counter").html(a);
         
                var txt = drg.text();
                $("#" + txt).html(parseInt($("#" + txt).text()));
            $(this).append("<div id=" + drg.text() + " value=" + drg.attr('value') + ">" + drg.text() + "</div>");

                $(this).append("<div id='" + drg.text() + "' style='float:right'>" + $("#" + drg.text()).length + "</div><br>");
            
            $("#" + drg.text()).draggable({
                drag: function (event, ui) {
                    $("#droppable").droppable('disable');
                    drg = $(this);
                },
                stop: function (event, ui) {
                    var tt = drg.text();       
                        
                        $("#" + drg.text()).remove();

                        $(this).remove();
                        $("#" + tt + " + br ").remove();
                        $("#" + tt).remove();
     
                    a = a.replace(drg.attr('value'), "");
                    
                    $("#counter").html(a);
                },
                helper: 'clone'
            });
        }
    });
});
 </script>
</body>
</html>
El problema está en que cuando se inserta el objeto dentro de la zona no se mantiene el formato del css y ademas me añade un 1 a la derecha.... Otro problema es que si inserto muchos se me sale de la zona (ya que se pone uno debajo del otro y no uno al lado del otro, no se porque....)

Como podria resolverlo?? Alguna idea?

Saludos y gracias!
  #2 (permalink)  
Antiguo 24/03/2014, 11:08
 
Fecha de Ingreso: febrero-2014
Mensajes: 17
Antigüedad: 7 años, 4 meses
Puntos: 1
Respuesta: mantener formato zona draggable

He conseguido avanzar un poco.... Solo necesito que mantenga el color, que no desaparezca el elemento al añadirlo y que pueda eliminarlo, dejo el codigo

Código:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
 
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
<style>
/* Prevent the text contents of draggable elements from being selectable. */
[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}

.row {
  height: 20px;
  width: 150px;
  float: left;
  border: 2px solid #666666;
  background-color: #ccc;
  margin-right: 5px;
  -webkit-border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 3px #000;
  -ms-box-shadow: inset 0 0px 3px #000;
  box-shadow: inset 0 0 3px #000;
  text-align: center;
  cursor: move;
   margin-bottom: 5px;
}

.column {
  height: 30px;
  width: 150px;
  float: left;
  border: 2px solid #666666;
  background-color: #ccc;
  margin-right: 5px;
  -webkit-border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 3px #000;
  -ms-box-shadow: inset 0 0 3px #000;
  box-shadow: inset 0 0 3px #000;
  text-align: center;
  /*cursor: move;*/
}
.column header {
  color: #fff;
  text-shadow: #000 0 1px;
  box-shadow: 5px;
  padding: 5px;
  background: -moz-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
  background: -webkit-gradient(linear, left top, right top,
                               color-stop(0, rgb(0,0,0)),
                               color-stop(0.50, rgb(79,79,79)),
                               color-stop(1, rgb(21,21,21)));
  background: -webkit-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
  background: -ms-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
  border-bottom: 1px solid #ddd;
  -webkit-border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -ms-border-radius-topleft: 10px;
  border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -ms-border-top-right-radius: 10px;
  -moz-border-radius-topright: 10px;
  border-top-right-radius: 10px;
  margin-bottom: 5px;
}

.droppable { 
	position:relative;
    width: 90%; 
    height: 100px;
    float: left; 
    border:solid 5px gray;
    margin-left:5px;
}
</style>

</head>
 
<body>

<div id="columns">
  <div class="column" style='color:#E9122F'><header>Ejemplos</header>
  	<div class="row" draggable="true" value="ejemplos1">Ejemplos_1</div>
  	<div class="row" draggable="true" value="ejemplos2">Ejemplos_2</div>  	
  	<div class="row" draggable="true" value="ejemplos3">Ejemplos_3</div>	
  	</div>
  <div class="column"  style='color:#0B33E6'><header>Pruebas</header>
    <div class="row" draggable="true" value="pruebas1">Pruebas_1</div>
  	<div class="row" draggable="true" value="pruebas2">Pruebas_2</div>  	
  	<div class="row" draggable="true" value="pruebas3">Pruebas_3</div>
  </div>
  <div class="column" style='color:green'><header>Otros</header>
    <div class="row" draggable="true" value="otros1">Otros_1</div>
  	<div class="row" draggable="true" value="otros2">Otros_2</div>  	
  	<div class="row" draggable="true" value="otros3">Otros_3</div>
  </div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="droppable" class="droppable">
  <p>Drop here</p>
</div>
<div id="counter">

</div>

<script>
$(function () {
    var drg="";
    var a = "";
$(".row").draggable({
        drag: function (event, ui) {
            drg = $(this);
            $(".droppable").droppable('enable');
        },
        helper: 'clone'

    });
$("#droppable").droppable({ accept: ".row",
           drop: function(event, ui) {
             var dropped = ui.draggable;
          
            var droppedOn = $(this);
            
            $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);  
            
             a = a +drg.attr('value')+ " ";
          
            $("#counter").html(a);
            
                var txt = drg.text();
                $("#droppable" + txt).html($("#droppable" + txt).text());
            
            $("#droppable" + drg.text()).draggable({
                drag: function (event, ui) {
                    $("#droppable").droppable('disable');
                    drg = $(this);

                },
                stop: function (event, ui) {
                    var tt = drg.text();
                        $("#droppable" + drg.text()).remove();

                        $(this).remove();
                        $("#droppable" + tt + " + br ").remove();
                        $("#droppable" + tt).remove();
                    a = a.replace(drg.attr('value'), "");
                    
                    $("#counter").html(a);

      		},
      		
            });
      },
                helper: 'clone'
                  
                     });
    });
    

 </script>

</body>
 
</html>
Alguna idea??

Saludos!

Última edición por vale_N; 24/03/2014 a las 11:22
  #3 (permalink)  
Antiguo 24/03/2014, 16:57
Avatar de codeams  
Fecha de Ingreso: diciembre-2012
Ubicación: México
Mensajes: 103
Antigüedad: 8 años, 6 meses
Puntos: 16
Respuesta: mantener formato zona draggable

¿No será que necesitas utilizar z-index?
Quizá el fondo del elemento draggable no se esta sobreponiendo al "fondo".

Al utilizar z-index recuerda que solo funciona para elementos con la propiedad position no es estática como los navegadores la definen por defecto.
__________________
¿Quién es codeams? codeams.ml
¿Qué hace en su tiempo libre? codepen.io/codeams

Etiquetas: draggable, formato
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:52.