javascriptjquerydrag-and-dropgridster

Gridster not dynamically moving widgets

I am trying to use Gridster.js to do some drag and drop functionality in my project.

I am using a bunch of divs for my widgets, with forms and buttons inside of these, instead of using an unordered list.

My issue is that my first column is not being able to drag, and i can not drop my widgets anywhere. They just drop to back to their original spot

Here is my layout:

<div class="gridster">
     <div class="dragMe" data-row="1" data-col="1" data-sizex="1" data-sizey="1">
          <form>
                <button>//button stuff here </button>
          </form>
     </div>
     <div class="dragMe" data-row="1" data-col="2" data-sizex="1" data-sizey="1">
          <form>
                <button>//button stuff here </button>
          </form>
     </div>
     <div class="dragMe" data-row="2" data-col="1" data-sizex="1" data-sizey="1">
          <form>
                <button>//button stuff here </button>
          </form>
     </div>
     <div class="dragMe" data-row="2" data-col="2" data-sizex="1" data-sizey="1">
          <form>
                <button>//button stuff here </button>
          </form>
     </div>

... ETC
</div>

and here is my js, which is in doc ready

var gridster = $('.gridster').gridster({
            widget_margins: [5,5],
            widget_selector: '.dragMe',
            widget_base_dimensions: [264, 103],
            max_cols: 5,
            max_rows: 5,
            resize: {
                enable: true
            },
            draggable: {
                start: function(event, ui) {
                    dragged = 1;
                },
                stop: function(event, ui){
                    var id = this.$helper[0].attributes[0].value;
                    var row = this.$helper[0].attributes[1].value;
                    var col = this.$helper[0].attributes[2].value;
                    console.log(id, row, col);
                }, 
                items: '.dragMe',
                limit: true
            }
        }).data('gridster');

I have both grister.js and the css file. Any suggestions for improvement?

Solution

  • I think there is something else in your code that is messing it up; check this jsfiddle, I copied and pasted your code and only added:

    .dragMe {
    background-color:#0f0;
}
.preview-holder {
    background-color:#000!important;
}

    Just coloring them so you can see the widgets. Other than that, the only thing I changed was the text of the buttons and your "...ETC". It doesn't drag if you try and drag it by the button, but you can drag from anywhere else on the widget.

    If for some reason you need to drag by the button, I would recommend changing it to a non input/button element and simulating whatever functionality you need with JavaScript.

    When my grid gives me trouble, here's what I check: