arrastrar div en la pantalla
Publicado por Molitaa (4 intervenciones) el 11/11/2016 16:59:54
Hola a todos, quiero ver si me pueden apoyar ya que tengo rato que no logro hacer lo que deseo.
Estoy trabajando con Div los cuales quiero mover por toda mi pantalla y estoy utilizando draggable pero no se logra mover, no se si me esta faltando algo. Alguna idea que me pueda ser de utilidad se los agradecería mucho.
lo tengo de la siguiente manera:
con mi CSS
Muchas gracias.
Estoy trabajando con Div los cuales quiero mover por toda mi pantalla y estoy utilizando draggable pero no se logra mover, no se si me esta faltando algo. Alguna idea que me pueda ser de utilidad se los agradecería mucho.
lo tengo de la siguiente manera:
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
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
autoOpen: false,
show: {
effect: "clip",
duration: 500},
hide: {
effect: "clip",
duration: 400 }});
$("#tabs").tabs({
activate: function (event, ui) {
var selectab = $(ui.tab).text();
}});
$("#dialog").dialog(
{ position: { my: 'right bottom', at: 'right bottom', of: window }, width: 520 }
);});
</script>
<div id="dialog" title="Pendientes">
<div id="tabs" style="margin: 0px">
<ul>
<li><a href="#tabs-1" style="font-size: x-small">Ticket Pendiente</a></li>
</ul>
<div id="tabs-1">
<table class="TRCAGrid normal" >
<thead>
<tr>
<th>Usuario</th>
<th>Ticket</th>
<th>Fecha</th>
<th>Días </th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
</div>
</div>
con mi CSS
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
.ui-dialog {
overflow: hidden; position: absolute; top: 0; left: 0;padding: .2em;
outline: 0;}.ui-dialog .ui-dialog-titlebar {
padding: .4em 1em;
position: relative;}.ui-dialog .ui-dialog-title {
float: left;margin: .1em 0;
white-space: nowrap;
width: 90%;
overflow: hidden;text-overflow: ellipsis;
}.ui-dialog .ui-dialog-titlebar-close {
position: absolute;right: .3em;
top: 50%;
width: 20px;margin: -10px 0 0 0;
padding: 1px; height: 20px;}.ui-dialog .ui-dialog-content {
position: relative; border: 0;padding: .5em 1em;
background: none; overflow: auto;}.ui-dialog .ui-dialog-buttonpane {
text-align: left;
border-width: 1px 0 0 0;
background-image: none;
margin-top: .5em;
padding: .3em 1em .5em .4em;
}.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
float: right;}.ui-dialog .ui-dialog-buttonpane button {
margin: .5em .4em .5em 0;
cursor: pointer;}.ui-dialog .ui-resizable-se {
width: 12px; height: 12px;right: -5px;
bottom: -5px;
background-position: 16px 16px;
}.ui-draggable .ui-dialog-titlebar {
cursor: move;}.ui-draggable-handle {
-ms-touch-action: none;
touch-action: none;
}Muchas gracias.
Valora esta pregunta
0