mantener formato zona draggable

vale_N · #1 (**permalink**) 24/03/2014, 06:09

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!

vale_N · #2 (**permalink**) 24/03/2014, 11:08

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!

codeams · #3 (**permalink**) 24/03/2014, 16:57

¿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.