hootsuite / grid

Drag and drop library for two-dimensional, resizable and responsive lists
http://hootsuite.github.io/grid/
Apache License 2.0
3.57k stars 279 forks source link

Empty col and Disable drag #83

Open mrrs6 opened 8 years ago

mrrs6 commented 8 years ago

Hey ! Is there any way to disable dragging ? I would like to make it for non-admin users. How about inserting an empty col/row and make it stay after reflow/adding/removing rows/cols?

andrei-picus-hs commented 8 years ago

You can pass dragAndDrop: false through options to disable dragging.

How about inserting an empty col/row and make it stay after reflow/adding/removing rows/cols?

Can you please explain what you mean by this?

mrrs6 commented 8 years ago

Well, i did it by creating an empty cell and resizing it vertically when i add/remove rows. Thanks for the tip :) And great work by the way!!! I am doing this to create a clear division between two sections, let's say on the left i have programs and on the right documents. What I did:

[] [] [] |..........| [][] [] [] [] |empty | [][] .........|..........| []

If i add or remove rows to grid (i'm doing it to adjust to screen size without getting awful and big cells) empty col is resizing its height(nrows)!

PS: Dots are in the draft to keep spacing.

andrei-picus-hs commented 8 years ago

If i add or remove rows to grid empty col is resizing its height(nrows)!

  1. Shouldn't it? Don't you want the division to stretch all the way down? (btw, you can use height: 0 and the lib will make sure the column will always stretch).
  2. How are you adding and removing rows?

PS: Dots are in the draft to keep spacing.

Check the code section in the markdown help.

asmarkis commented 8 years ago

I noticed that after I have turned off dragging using dragAndDrop to false, the events of the 'draggable grid' are still bound by _bindEvents() called by the initialization of the grid. I fixed this issue by modifying the jquery.gridlist.js like so:

    var DraggableGridList = function(element, options, draggableOptions) {
    this.options = $.extend({}, this.defaults, options);
    this.draggableOptions = $.extend(
      {}, this.draggableDefaults, draggableOptions);

    this.$element = $(element);
    this._init();
    if (this.options.dragAndDrop)
      this._bindEvents();
    };

Now if there will be more events than just the dragAndDrop ones, this would not be the final solution, but just a heads up.