Open bparrish opened 10 years ago
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 this 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');
Any ideas on improvements? I have the gridster.js and css in my project.
Please move this code snippets to a working jsfiddle test case. Easier for people to help you.
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:
and here is my js this is in doc ready
Any ideas on improvements? I have the gridster.js and css in my project.