JQuery - mantener formato zona draggable

   
Vista:

mantener formato zona draggable

Publicado por Ricchar (12 intervenciones) el 24/03/2014 13:12:24
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<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 podría resolverlo?? Alguna idea?

Saludos y gracias!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

mantener formato zona draggable

Publicado por xve (557 intervenciones) el 24/03/2014 15:04:40
Hola Ricchard, en este linea, es donde indicas que te pinte la longitud en esta linea:
1
$(this).append("<div id='" + drg.text() + "' style='float:right'>" + $("#" + drg.text()).length + "</div><br>");
Que es el value mas un espacio, y como value no es nada, siempre es un espacio = longitud 1. Si comentas esa linea ya no te aparece.

Sobre tu otra pregunta sobre el cuadro donde se muestra el resultado, no se muy bien que quieres que haga, pero por ejemplo, si en el id droppable le añades al estilo: overflow-y: scroll; te mostrara una barra de desplazamiento vertical.

Coméntanos si te sirve, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

mantener formato zona draggable

Publicado por Ricchar (12 intervenciones) el 24/03/2014 15:18:02
Gracias, lo del numero lo he conseguido solucionar, ahora me explico con lo de que "se sale de la zona", yo tengo puesto un recuadro y me gustaria que cada vez que añado algo no se pusiera uno debajo de otro sino uno al lado del otro, y tambien si fuera posible que me mantuviera el formato del CSS, como se ve arriba Ejemplo_1 tiene un formato y cuando esta en la zona de draggable aparece como texto, me gustaria que mantuviera el CSS.



Espero haberme explicado mejor que la primera vez.

Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

mantener formato zona draggable

Publicado por Ricchar (12 intervenciones) el 24/03/2014 18:07:45
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<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) {
                    //alert(console.log("drop"));
                   //$(this).removeClass("border").removeClass("over");
             var dropped = ui.draggable;
                  //alert(dropped);
            var droppedOn = $(this);
               //alert(droppedOn);
            $(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());
 
            //$(this).append("<div id=" + drg.text() + " value=" + drg.attr('value') + ">" + drg.text() + "</div>");
 
            $("#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'
 
          /*over: function(event, elem) {
                  $(this).addClass("over");
                   console.log("over");
          },
                  out: function(event, elem) {
                    $(this).removeClass("over");
                  },*/
 
                     });
    });
 
 
 </script>
 
</body>
 
</html>

Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

mantener formato zona draggable

Publicado por xve (557 intervenciones) el 24/03/2014 18:25:27
Hola Ricchar, pon algo así:

1
$(this).append("<div id=" + drg.text() + " value=" + drg.attr('value') + " class='row' style='float:left'>" + drg.text() + "</div>");

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

mantener formato zona draggable

Publicado por Ricchar (12 intervenciones) el 24/03/2014 18:49:51
Perfecto!! Solo falta que me mantenga el color, con esa linea he vuelto a un codigo anterior y ya puedo hacer todo lo que necesito, excepto por el tema del color...como puedo obtener el color? Deberia aplicarselo en esta linea justo despues de left no?

1
$(this).append("<div id=" + drg.text() + " value=" + drg.attr('value') + " class='row' style='float:left'>" + drg.text() + "</div>");

Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

mantener formato zona draggable

Publicado por xve (557 intervenciones) el 24/03/2014 20:35:07
Hola Richar para el tema del color, yo lo haría todo con estilos... creo que es mas sencillo... aqui te adjunto de nuevo el código un poco modificado...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<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;
    margin-top:220px;
    overflow-y:scroll;
}
.color1 {color:#E9122F;}
.color2 {color:#0B33E6;}
.color3 {color:green;}
</style>
</head>
<body>
    <div id="columns">
        <div class="column"><header>Ejemplos</header>
            <div class="row color1" draggable="true" value="ejemplos1">Ejemplos_1</div>
            <div class="row color1" draggable="true" value="ejemplos2">Ejemplos_2</div>
            <div class="row color1" draggable="true" value="ejemplos3">Ejemplos_3</div>
            </div>
        <div class="column"><header>Pruebas</header>
            <div class="row color2" draggable="true" value="pruebas1">Pruebas_1</div>
            <div class="row color2" draggable="true" value="pruebas2">Pruebas_2</div>
            <div class="row color2" draggable="true" value="pruebas3">Pruebas_3</div>
        </div>
        <div class="column"><header>Otros</header>
            <div class="row color3" draggable="true" value="otros1">Otros_1</div>
            <div class="row color3" draggable="true" value="otros2">Otros_2</div>
            <div class="row color3" draggable="true" value="otros3">Otros_3</div>
        </div>
    </div>
 
    <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 value=" + drg.attr('value') + " class='"+drg[0].className+"' style='float:left'>" + txt + "</div>");
 
                    $("#" + 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>

Espero que te sirva... coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

mantener formato zona draggable

Publicado por Ricchar (12 intervenciones) el 25/03/2014 11:26:20
Buenas xve, probé tu codigo y el problema era que no podia eliminar el elemento, una vez dentro de la zona droppable no podia sacarlo fuera y eliminarlo, modifique un poco esta linea

1
$(this).append("<div value=" + drg.attr('value') + " class='"+drg[0].className+"' style='float:left'>" + txt + "</div>");


Y la deje asi

1
$(this).append("<div id=" + drg.text() + " value=" + drg.attr('value') + " class='"+drg[0].className+"' style='float:left'>" + txt + "</div>");

Pero ahora lo que me pasa es que si inserto 2 veces el mismo elemento, el segundo elemento no me lo elimina y si elimino el primero me elimina los 2..... Creo que el error esta en esa linea pero no se como solucionarlo. Dejo el codigo, que basicamente es el mismo solo que cambiando la linea que he puesto anteriormente.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<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;
    margin-top:220px;
    overflow-y:scroll;
}
.color1 {color:#E9122F;}
.color2 {color:#0B33E6;}
.color3 {color:green;}
.color4 {color:#FFFF00;}
.color5 {color:#FC9C03;}
.color6 {color:#E82CDE:}
</style>
</head>
<body>
<div id="columns">
        <div class="column"><header>Ejemplos</header>
            <div class="row color1" draggable="true" value="ejemplos1">Ejemplos_1</div>
            <div class="row color1" draggable="true" value="ejemplos2">Ejemplos_2</div>
            <div class="row color1" draggable="true" value="ejemplos3">Ejemplos_3</div>
            </div>
        <div class="column"><header>Pruebas</header>
            <div class="row color2" draggable="true" value="pruebas1">Pruebas_1</div>
            <div class="row color2" draggable="true" value="pruebas2">Pruebas_2</div>
            <div class="row color2" draggable="true" value="pruebas3">Pruebas_3</div>
        </div>
        <div class="column"><header>Otros</header>
            <div class="row color3" draggable="true" value="otros1">Otros_1</div>
            <div class="row color3" draggable="true" value="otros2">Otros_2</div>
            <div class="row color3" draggable="true" value="otros3">Otros_3</div>
        </div>
    </div>
 
    <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()));
                    alert($(this).css("color"));
                    $("p").detach();
                    //$(this).append("<div value=" + drg.attr('value') + " class='"+drg[0].className+"' style='float:left'>" + txt + "</div>");
					$(this).append("<div id=" + drg.text() + " value=" + drg.attr('value') + " class='"+drg[0].className+"' style='float:left'>" + drg.text() + "</div>");
                    $("#" + 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>

Saludos y gracias!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

mantener formato zona draggable

Publicado por xve (557 intervenciones) el 25/03/2014 16:50:35
Hola Ricchar, te pido perdon, quite el id...

1
$(this).append("<div id=" + txt + " value=" + drg.attr('value') + " class='"+drg[0].className+"' style='float:left'>" + txt + "</div>");

Si, el problema que hay, es que en todos los que son iguales, pones el mismo id, por eso te los elimina todos los que tienen el mismo id...

Yo lo quite, porque en teoría no pueden haber dos id's iguales en una misma pagina web.

Voy a ver si averiguo como hacerlo para eliminar uno solo...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

mantener formato zona draggable

Publicado por Ricchar (12 intervenciones) el 25/03/2014 16:54:40
Perdon para nada!!!! Me has ayudado mucho y eso son pequeñas cosas sin importancia.

Gracias de nuevo y a ver si entre los dos damos con la solucion!

Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

mantener formato zona draggable

Publicado por Ricchar (12 intervenciones) el 26/03/2014 14:28:48
He probado a ponerle un id diferente cada vez pero sigo con el mismo problema, quizá haya hecho una barbaridad... Te el código, las 2 lineas que están en negrita es la modificación hecha (lo demás esta igual).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<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;
    margin-top:220px;
    overflow-y:scroll;
}
.color1 {color:#E9122F;}
.color2 {color:#0B33E6;}
.color3 {color:green;}
.color4 {color:#FFFF00;}
.color5 {color:#FC9C03;}
.color6 {color:#E82CDE:}
</style>
</head>
<body>
<div id="columns">
        <div class="column"><header>Ejemplos</header>
            <div class="row color1" draggable="true" value="ejemplos1">Ejemplos_1</div>
            <div class="row color1" draggable="true" value="ejemplos2">Ejemplos_2</div>
            <div class="row color1" draggable="true" value="ejemplos3">Ejemplos_3</div>
            </div>
        <div class="column"><header>Pruebas</header>
            <div class="row color2" draggable="true" value="pruebas1">Pruebas_1</div>
            <div class="row color2" draggable="true" value="pruebas2">Pruebas_2</div>
            <div class="row color2" draggable="true" value="pruebas3">Pruebas_3</div>
        </div>
        <div class="column"><header>Otros</header>
            <div class="row color3" draggable="true" value="otros1">Otros_1</div>
            <div class="row color3" draggable="true" value="otros2">Otros_2</div>
            <div class="row color3" draggable="true" value="otros3">Otros_3</div>
        </div>
    </div>
 
    <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();
                    alert($(this).css("color"));
                    $("p").detach();
                   var number=Math.floor(Math.random()*101);
                   txt = txt + number;
		   $(this).append("<div id=" + txt + " value=" + drg.attr('value') + " class='"+drg[0].className+"'style='float:left'>" + txt + "</div>");
                    $("#" + 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>

Con eso consigo un id distinto pero sigo con el mismo problema....si pongo dos veces Ejemplos_1, no puedo eliminar el ultimo añadido.

Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

mantener formato zona draggable

Publicado por Ricchar (12 intervenciones) el 11/04/2014 13:22:28
Buenas xve!!

Encontraste algo? Yo he seguido con pruebas y buscando pero no he encontrado nada....

Tengo otra duda, esa web esta en un sitio seguro (HTTPS) y cada vez que accede me pide cargar script inseguro, habria alguna forma en el codigo de evitar eso (ya que no tengo acceso a modificar el server o el php.ini, etc)???

Saludos y gracias!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar