search

ducksboard / gridster.js

gridster.js is a jQuery plugin that makes building intuitive draggable layouts from elements spanning multiple columns
http://gridster.net/
MIT License
6.03k stars 1.2k forks source link

Callback functions do not get fired properly with multiple instances #305

Open onet4 opened 10 years ago

onet4 commented 10 years ago

When there are multiple gridster instances, only the last registered callback functions get triggered. 

<!doctype html>
<html>
<head>
    <title>Callback bug</title>
    <link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.css">
    <link rel="stylesheet" type="text/css" href="assets/demo.css">
    <script type="text/javascript" src="assets/jquery.js"></script>
    <script src="../dist/jquery.gridster.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

    <h2>Demo 1</h2>
    <div id="demo-1" class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">0</li>
            <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1</li>
            <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li>
            <li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>
            <li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li>
            <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li>
            <li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li>
            <li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li>
            <li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li>
        </ul>
    </div>

    <h2>Demo 2</h2>
    <div id="demo-2" class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">0</li>
            <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1</li>
            <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li>
            <li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>
            <li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li>
            <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li>
            <li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li>
            <li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li>
            <li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li>
        </ul>
    </div>

    <script type="text/javascript">
        var gridster = [];

        $(function() {

            gridster[0] = $("#demo-1 ul").gridster({
                namespace: '#demo-1',
                widget_base_dimensions: [100, 55],
                widget_margins: [5, 5],
                draggable: {
                    stop: function( event, ui ){ 
                        console.log( '#demo-1 dropped' );
                    },
                },              
                resize: {
                    enabled: true,
                    stop: function( event, ui ){ 
                        console.log( '#demo-1 resized' );
                    },                  
                },              
            }).data('gridster');

            gridster[1] = $("#demo-2 ul").gridster({
                namespace: '#demo-2',
                widget_base_dimensions: [200, 110],
                widget_margins: [10, 10],
                draggable: {
                    stop: function( event, ui ){ 
                        console.log( '#demo-2 dropped' );
                    },
                },
                resize: {
                    enabled: true,
                    stop: function( event, ui ){ 
                        console.log( '#demo-2 resized' );
                    },                  
                },
            }).data('gridster');

        });
    </script>
</body>
</html>

Even when I resize one of the widgets in demo 1, the callback for demo 2 gets triggered in the above example.

onet4 commented 10 years ago

It seems this pull request fixes it. https://github.com/ducksboard/gridster.js/pull/273