Draggable: relative positioning with clone helper and appendTo creates incorrect positioning

[michael.heuberger]

Hi

I'm using the jQuery UI Draggable addon for version 1.8.11 and am struggling implementing my idea because something is missing. Thus this ticket is asking for an enhancement.

I want relative positions for my draggables. At the moment, they are give. an absolute position when dragging has started.

I'm using this configuration:

    $(this.el).find('.draggable').draggable({
      addClasses: false,
      helper: 'clone',
      cursor: 'move',
      grid: [40, 40],
      opacity: 0.7,
      appendTo: '#grid',
      revert: 'invalid'
    });

Looking at the master branch on GitHub I can tell that draggables only can become relative when the helper is set to original, not clone like in my case.

My application has a toolbar and a big div tag (#grid) in the center where icons can be dropped. I want these icons to be relative to that div tag. Not absolute.

Please add an option to tell the draggables to keep a relative position when dropped over the droppable.

Thank you, Michael H.

[woodzu123]

Not sure if I've got you right, but have you tried that?

$('.droppable').droppable({ drop: function(event, ui) {
 $(ui.draggable).clone().css('position','relative').appendTo('.droppable');
}});

[michael.heuberger]

I tried that and it doesn't work.

I also found out that anytime I append an element to the droppable, the position always becomes absolute, no matter what configuration. Why so?

[michael.heuberger]

The problem is, when I use .css('position','relative') the position of that element is wrong when dropped. The conversion between absolute and relative coordinates doesn't work.

[Scott González]

You can work around this by resetting the positioning after switching to relative positioning:

var offset = elem.offset();
elem.css( "position", "relative" ).offset( offset );

[michael.heuberger]

I see, this is working. But I want to be able to drop over other draggable elements. This is possible with absolute elements only.

Like I want to drop an orange over a banana which has been dropped over an apple. Over multiple layers. Only for absolute elements this is doable.

But the disadvantage with absolute element is that the parent container doesn't get scrollbars when resized ... oh well, HTML5 can't help me. Maybe HTML6 :o

Any ideas?

[Scott González]

I'm now confused about whether you want a new feature in draggable or whether you want to know how to build your application. When you say this is only possible with absolutely positioned elements, are you referring to a limitation you think exists in HTML/CSS or only in the draggable plugin?

[michael.heuberger]

Right, I'm confused myself and exploring new areas. I didn't fully understand the abolsute/relative positioning before. Sorry to have bothered you and thank you for your time anyways.

Just one last question: Do you know a web application where you can drag and drop elements into a grid and connect them with lines? Something like a flowchart application. I'm currently comparing and evaluating JS frameworks for that project. So any hints are welcome.

[Scott González]

Please use the ​forums for questions like that. Do you still want this ticket open?

[michael.heuberger]

OK, will go to the forum.

Regarding this ticket, a minor enhancement like a new option to position draggables as relative on the droppable would be awesome.

[[email protected]…]

I have similar problem in my case. This issue is either not solved or I have a bug in my code. Please take a look at ​http://jsfiddle.net/MbYq6/ and advise.

[Jörn Zaefferer]

That comment from 4 weeks ago including the fiddle looks like it may point out a bug. I can't really tell (yet). Let's consider it as such and try to reproduce or close. Otherwise it doesn't seem like we actually have a usecase here to support relative positioning, so no need for a feature ticket.

[mikesherov]

confirmed on latest: ​http://jsfiddle.net/tbdqn/

[mikesherov]

As discussed with scott.gonzalez... here's the correct way to do this: ​http://jsfiddle.net/tbdqn/1/ Therefore, it's not a bug. Thanks for contributing!