jquery draggable stops working after setting divs to "position: static"

Question

I currently have a simple setup of div-boxes that I can move through the jquery draggable functionalities. I now encountered a problem I just can't figure out. The dragging works perfectly fine if I initially load the page with the following setup:

html:
<div id="box_1" class="card ui-widget-content"><p>Peter</p></div>
<div id="box_2" class="card ui-widget-content"><p>Susan</p></div>
...

css:
.card {
    width: 200px;
    height: 280px;
    border: 1px solid blue;
    padding: 10px;
    margin: 15px;
    box-sizing: border-box;
    float: left;
    position: static;
}

js:
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script>


$(document).ready(function(){

    $( ".card" ).draggable();

    }); 
</script>

Now I wanted to add a button that "resets" the divs to the original grid:

    $( "#grid" ).click(function() 
    {
        $('.card').css({position: 'static'});

    });

I thought it would be easiest to just use "position: 'static'", as this already works when opening the page. Now the problem here is, that while the divs readjust to a grid the way I want them to, the draggable functionality is gone.

I already tried to 'disable' and 'enable' draggable on the divs but it does not do the trick.

I am kind of confused why the functionality just stops.

Thank you very much for your help :D

Check [this](http://stackoverflow.com/questions/1324044/how-do-i-disable-a-jquery-ui-draggable). — Deepak Biswal, Oct 30 '15 at 15:06

score 1 · Accepted Answer · answered Oct 30 '15 at 15:15

To set the cards back to their original position just set left and top to 0.

$( ".card" ).draggable();


$( "#grid" ).click(function() 
{
    //$('.card').css({position: 'initial'});
    $( ".card" ).css({top:0,left:0});

});

http://jsfiddle.net/h2mwo7um/4/

edit As already noticed by @Paul, the draggable call overrides the css of the card, that is why the initial setting does not matter.

Paul · Answer 2 · 2015-10-30T15:20:25.060

0

jQuery UI uses the left and top properties to position the element. The properties are not usable with a static position. You could use relative, absolute, or fixed if you want, but not static.

I think this will achieve the desired effect.

$(document).ready(function() {
    $(".card" ).draggable();
    $( "#grid" ).click(function() {
        $('.card').draggable("destroy").draggable();
    }); 
});

edited Oct 30 '15 at 15:20

answered Oct 30 '15 at 15:07

Paul

646
4
13

But why does it work when I initially load the page? The divs are already defined as static at this point, aren't they? – dom Oct 30 '15 at 15:10
1

The call to ".draggable()" assigns the style "position:relative" to the elements. – Paul Oct 30 '15 at 15:14
Oh, ok. Thank you for that information. Could you maybe also suggest a solution how to "reset" the grid. If you have one? – dom Oct 30 '15 at 15:15
I've edited my answer with a snippet that should reset the cards to their original positions without permanently removing the draggable functionality. – Paul Oct 30 '15 at 15:21
unfortunately the code did not work for me... thanks anyways for the information about how draggable assigns the position element (; – dom Oct 30 '15 at 15:37

jquery draggable stops working after setting divs to "position: static"

2 Answers2