5

In a nutshell, if you use draggable with a grid and set revert: 'invalid' on draggable items they don't return to exactly the same place you started dragging them from. They return to a place close to where you started dragging them...pretty weird.

This could well be a bug in UI. If so, does anyone know if there's a workaround for it?

Example: http://jsfiddle.net/n2AUv/11/

Thanks! John.

John Hunt
  • 4,265
  • 8
  • 45
  • 59
  • Everything behaves sensibly with just `grid` or just `revert` but all the sense goes away when you have both. The position it returns to seems random. Are we seeing the same complete nonsense? – mu is too short Nov 12 '11 at 06:42
  • It's what I see.. it's frustrating as it's a bit of a show stopper for my project. – John Hunt Nov 12 '11 at 07:27
  • I'd call it a bug and make a bug report, the current behavior doesn't make any sense at all. Could you re-parent the elements when they're dropped? That might help, the negative offsets (use your DOM inspector and you'll see them) might be confusing something. – mu is too short Nov 13 '11 at 07:38
  • http://bugs.jqueryui.com/ticket/4696 Bug filed > 2 years ago and set to 'wontfix' - this suggests I'm at error. Any thoughts? :/ – John Hunt Nov 14 '11 at 02:14
  • "These options won't exist in the rewrite." I have a response to that but it isn't suitable for a polite forum like SO. Is there a beta of the rewrite on github.com somewhere? – mu is too short Nov 14 '11 at 02:38

1 Answers1

1

grid option documentation says:

Snaps the dragging helper to a grid, every x and y pixels.

So it looks like grid was designed to be used only with some kind of helper. And really, if you use helper: "clone" things are good: helper returns near the place of original instance and

Yes, this looks like a bug in UI. But there's a workaround: use helper for dragging:

$(".dragme").draggable({
    revert: true,
    helper: "clone",
    grid: [50,50]
});

This workaround introduces other weird bug: after a valid drop on droppable area helper gets destroyed and original instance exists in it's place (you can see it at fiddle).

This bug somehow solved for draggable with connectToSortable options. Maybe it's possible to solve the bug in your case too.

Also, I suspect the whole mess is because of this chunk of code in draggable.

yko
  • 2,710
  • 13
  • 15
  • 1
    @John Hunt If it helps, here is a tweak to yko's code that correctly places the dragged element in the correct place in the drop target div (using absolute positioning): http://jsfiddle.net/greglockwood/EBHWr/ – GregL Nov 15 '11 at 08:32
  • @GregL very nice. I actually thought `drop` being triggered on any drop, not only valid. Looks like my solution combined with yours one could solve this problem. Don't you mind if I combine them together in my answer? – yko Nov 15 '11 at 08:56
  • Not at all. It was fun to take your answer and run with it. You can't split bounties, can you? :-) – GregL Nov 15 '11 at 09:12
  • I don't know if you can split bounties, but if I can I will :) – John Hunt Nov 15 '11 at 09:23
  • @GregL - I'm not actually too hot with jQuery / ui, is there a way to hide the original square on your fiddle as you drag it (so it looks right)? I had a go but it ended up totally disappearing for good etc. – John Hunt Nov 15 '11 at 09:28
  • @GregL, than you better write your own answer and receive bounty. Somebody have to! :) – yko Nov 15 '11 at 09:37
  • 1
    @JohnHunt talking about hiding original instance: just use `start` and `stop` events of `draggable` to hide and restore original: http://jsfiddle.net/8Q5WX/3/ Also note: this fiddle based on @GregL one. Final solution looks a bit dirty, but works. – yko Nov 15 '11 at 09:47
  • @John Hunt: Does this update do what you want? http://jsfiddle.net/greglockwood/EBHWr/1/ – GregL Nov 15 '11 at 09:49
  • 1
    Lol, we both came up with the same solution. :-) Great minds think alike. – GregL Nov 15 '11 at 09:50
  • @GregL, almost :) I'd like it to make copies of the object from the original squares on the screen. The idea is that you'll have a palette of items at the bottom that you can then drag to the dropzone over and over... this is v.close to that though :) Thanks! – John Hunt Nov 17 '11 at 09:29
  • Like this (but with snappy grid obviously..) http://examples.placona.co.uk/drag_drop – John Hunt Nov 17 '11 at 09:31