Opened 9 years ago

Closed 7 years ago

#7220 closed bug (notabug)

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.

Change History (15)

comment:1 Changed 9 years ago by 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');
}});

comment:2 Changed 9 years ago by 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?

comment:3 Changed 9 years ago by 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.

comment:4 Changed 9 years ago by 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 );

comment:5 Changed 9 years ago by 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?

comment:6 Changed 9 years ago by 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?

comment:7 Changed 9 years ago by 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.

comment:8 Changed 9 years ago by Scott González

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

comment:9 Changed 9 years ago by 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.

comment:10 Changed 7 years ago by Scott González

Type: enhancementfeature

comment:11 Changed 7 years ago by sureshcjc@…

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.

comment:12 Changed 7 years ago by Scott González

Milestone: 1.9.02.0.0

comment:13 Changed 7 years ago by Jörn Zaefferer

Type: featurebug

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.

comment:14 Changed 7 years ago by mikesherov

Status: newopen
Summary: Relative positions for draggables wantedDraggable: relative positioning with clone helper and appendTo creates incorrect positioning

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

comment:15 Changed 7 years ago by mikesherov

Resolution: notabug
Status: openclosed

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!

Note: See TracTickets for help on using tickets.