Jquery draggables: la eliminación de un elemento cambia la posición de otros elementos soltados

When elements are placed / dropped (by dragging from one DIV to another) and then removing one in the dropped DIV, some of them are changing the position.

Here is a test scenario: http://jsfiddle.net/TcYHW/8/

Y el código principal:

<div id="dropwin"></div>
<div id="dragables">
    <div id="d1" class="d"></div>
    <div id="d2" class="d"></div>
    <div id="d3" class="d"></div>
    <div id="d4" class="d"></div>

        containment: '#dropwin',
        stack: '#dragables div',
        cursor: 'move',

¿Cómo puedo evitar esto?

I found, that the elements are placed in relative position to the starting position. How can I make them stick at the dropped position even if some are removed?

I found two near similar questions, but without an satisfying answer:

Eliminar en Jquery divs con draggables y resizables

jQuery arrastrable eliminando sin cambiar la posición de otros elementos

preguntado el 10 de marzo de 12 a las 01:03

2 Respuestas

You need your elements to be positioned absolute. Then the deleted boxes won't affect the flow of the other elements.

You could just use css to position them absolute:

.d { 
    width: 50px;
    height: 50px;
    margin: 10px;
    display: inline-block;
    position: absolute;

But then you would have to manually place each box. The trick is to leave them positioned static (o relative después de .draggable() gets done) and then use javascript to set their positions and set them to absolute posicionamiento:

$('.d').each(function() {
    var top = $(this).position().top + 'px';
    var left = $(this).position().left + 'px';
    $(this).css({top: top, left: left});
}).css({position: 'absolute'});

Demostración: http://jsfiddle.net/jtbowden/5S92K/

respondido 10 mar '12, 01:03

Thank you, your solution looks like that what i need, but only if the "dropwin" is (static) on the top left corner. If you try this jsfiddle.net/BillyG/5S92K/2 where the DIV is centered and change the browser window size horizontally, the dropped draggables don't stay fixed, they move. The positioning have to be absolute in relation to the dropwin-box. A hint, how to resolve this? - billy g

#dropwin y #dragables necesito tener position: relative for absolute positioning to do the right thing. jsfiddle.net/5S92K/3 - Jeff B

Thank you, it solves it the best way so far. I prefer your solution because it does not need extra tags around the draggables as Kaushtuvs' solution does. - billy g

I just made some edits in your jsFiddle demo and it seemed to be working

My Edits:

<div id="dropwin"></div>
<div id="dragables">
<div class="outer"><div id="d1" class="d"></div></div>
<div class="outer"><div id="d2" class="d"></div></div>
<div class="outer"><div id="d3" class="d"></div></div>
<div class="outer"><div id="d4" class="d"></div></div>
<button id="b1">Remove d1</button>
<button id="b2">Remove d2</button>
<button id="b3">Remove d3</button>
<button id="b4">Remove d4</button>

Y en css:

#dropwin { width: 300px; height: 300px; border: 1px solid #f00;}
#dragables { width: 300px; height: 70px; border: 1px solid #00f; }
.d { width: 50px; height: 50px; margin: 10px; display: inline-block; }
#d1 { background: #f00; position:absolute; }
#d2 { background: #ff0; position:absolute; }
#d3 { background: #f0f; position:absolute; }
#d4 { background: #0ff; position:absolute; }
.outer{ margin:1px 2px 0 0; float:left; width:60px;}

respondido 10 mar '12, 02:03

Thank you, I tried you solution here jsfiddle.net/BillyG/TcYHW/9 and it looks good, even if the "dropwin" is centered. I will implement this in my application and see if it solves the problem. But why have you added this margins on top and right of the outer-class? - billy g

Forgot to add the position:absolute on #d1-#d4 jsfiddle.net/BillyG/TcYHW/10 - billy g

Without the margin the divs will collapse into one another initially. What I mean is the four div will be on top of one another when the code first loads. Glad its working now. can you accept the answer then : ) cheers. - Kaushtuv

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.