Gridster not dynamically moving widgets

Question

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?

Answer 1

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:

• Opening/Closing tags all match

• data attributes make sense (Gridster gets crazy if widgets overlap)

• Styles are being applied appropriately - make certain it is supposed to look like what you think.

  I had a couple times where I was expecting to see one thing, and because I didn't assumed the javascript was at fault, but it was missing CSS styles.

Answer 2

I thing Gridster requires one element (such as div or ul) below the <div class="gridster"> element:

<div class="gridster">
     <div class="gridster-container">
         <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>
</div>

And the JavaScript:

var gridster = $(".gridster div.gridster-container").gridster({...

You can also use ul and li like they are using in their website.

Answer 3

i test it for very long time ,you have to erase thise from your code:

(widget_base_dimensions: [264, 103])and your widgets gets orgnaized