#7220 closed bug (notabug)

Opened April 05, 2011 01:08PM UTC

Closed November 04, 2012 07:19PM UTC

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

Reported by: michael.heuberger Owned by:
Priority: minor Milestone: 2.0.0
Component: ui.draggable Version: 1.8.11
Keywords: Cc:
Blocked by: Blocking:
Description

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.

Attachments (0)
Change History (15)

Changed April 05, 2011 05:20PM UTC by woodzu123 comment:1

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');
}});

Changed April 06, 2011 02:08AM UTC by michael.heuberger comment:2

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?

Changed April 06, 2011 02:39AM UTC by michael.heuberger comment:3

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.

Changed April 06, 2011 01:51PM UTC by scottgonzalez comment:4

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

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

Changed April 06, 2011 03:33PM UTC by michael.heuberger comment:5

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?

Changed April 06, 2011 03:56PM UTC by scottgonzalez comment:6

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?

Changed April 07, 2011 01:02AM UTC by michael.heuberger comment:7

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.

Changed April 07, 2011 12:12PM UTC by scottgonzalez comment:8

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

Changed April 07, 2011 12:16PM UTC by michael.heuberger comment:9

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.

Changed June 26, 2012 01:22AM UTC by scottgonzalez comment:10

type: enhancement → feature

Changed October 10, 2012 04:44PM UTC by sureshcjc@gmail.com comment:11

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.

Changed October 11, 2012 02:49PM UTC by scottgonzalez comment:12

milestone: 1.9.0 → 2.0.0

Changed November 04, 2012 06:49PM UTC by jzaefferer comment:13

type: feature → bug

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.

Changed November 04, 2012 06:55PM UTC by mikesherov comment:14

status: new → open
summary: Relative positions for draggables wanted → Draggable: relative positioning with clone helper and appendTo creates incorrect positioning

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

Changed November 04, 2012 07:19PM UTC by mikesherov comment:15

resolution: → notabug
status: open → closed

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!