Gridster.js draggable div with content

Question

There is a known issue with gridster that if you have content inside your drag handle, you will not be able to drag with it. I got a response from the creator saying use ignore_dragging to handle this, but I have tried it for a few hours now with no luck. This is the example I was provided with

http://jsbin.com/fuwunuyi/6/edit

I have tried using this in many different ways for a few hours now and cannot seem to get this working. Has anyone successfully gotten this to work?

Just in case - here is the documentation for the ignore_dragging - [ignore_dragging] Object | Function optional Array of node names that should not trigger dragging, by default is ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON']. If a function is used return true to ignore dragging. (http://gridster.net/docs/classes/Draggable.html).

Any help would be much appreciated!!

score 6 · Answer 1 · answered Jul 16 '15 at 18:53

6

I had the same problem. This worked for me:

  handle: 'header, header *'

It seems that you can specify multiple handle selectors separated by comma. I tried 'header, span' and then I replaced span with 'header *'. This basically means everything inside the header.

No need for ignore_dragging

answered Jul 16 '15 at 18:53

Aebsubis

1,921
18
19

I was stuck on this problem . Perfect answer. Thanks :) – New Bee May 26 '16 at 08:40

score 0 · Answer 2 · answered Jul 23 '14 at 06:56

0

I added "handle" to your draggable. See below code

$(function(){

  gridster = $(".gridster ul").gridster({
    widget_base_dimensions: [100, 120],
    widget_margins: [5, 5],
    draggable: {
      handle: 'header span',
      ignore_dragging: function (event) {

        return true;
      }
    }   }).data('gridster');

});

Make sure you are dragging on element which you mentioned in draggable handle.

answered Jul 23 '14 at 06:56

Aghil V

31
5

the drag handle is not the issue, if you have children inside the drag handle, it will no longer drag, the ignore dragging is suppose to solve this - i just have no idea how. – ajmajmajma Jul 23 '14 at 15:12
@user3201696 Please see handle: 'header span' span is the child element. After insert child element, to drag you have to make this child element as your handle. Or another solution is check that your span width is 100%; Each time you dragging its on span, not header. If you change span width as 100px, and drag in other area (ie header) then also drag will work. In your code there is no handle. Add handle in draggable and properly assign its value, you will be able to do drag. – Aghil V Jul 23 '14 at 15:39
Thank you for taking the time to respond in such detail. The issue is not entirely with having something inside the draggable div that is not draggable. The issue is like so - I have a header element that has quite a bit of children divs inside of it, not only that he content of those divs is unique each time as it is being pulled off a server. So in this case - it would be most convenient if I have the drag handle as the entire header so it would mean anything is the drag handle as well. One of the developers responded and said I could use ignore_dragging, I just don't understand how. – ajmajmajma Jul 24 '14 at 14:44

score 0 · Answer 3 · answered Dec 03 '15 at 15:45

I too had a widget-header with some content (inside a child div classed "widget-name") and a close icon to remove the widget. I was only able to drag using the empty space in widget-header div.

draggable:
  handle: ".widget-header"

So, I changed it to as mentioned below and it worked.

draggable:
  handle: ".widget-header, .widget-header .widget-name"

Gridster.js draggable div with content

3 Answers3