Re: [Proto-Scripty] Draggables inside div with overflow:scroll

[Jason Westbrook]

I actually had the exact same problem with the Draggables and Droppables

If you add {ghosting:true} to the options then Draggables will create a copy of the DIV and attach it to the body element, (outside the containing scrolling div) - but the downside is when you drop it you have to recreate the div in the new drop zone

you also need to add

"revert" : function(e){

      e.style.position = "relative";

      e.style.zIndex = '';

      return false;

 },

to the Draggables so when it reverts and goes back to the draggable list the styles are not all screwed up

I've updated the jsfiddle with the changes I've suggested

http://jsfiddle.net/nB8PC/3/

take a look and see if that works for you

Jason Westbrook | T: 313-799-3770 | jwest...@gmail.com

On Tue, May 7, 2013 at 4:30 AM, <ayso...@gmail.com> wrote:

I have created two divs. One is for draggable objects. Another for the area where they should be dropped.

The both divs should have the same height and if there are large number of draggables to have scrollbar.

When I add overflow: scroll to the div with draggable objects, then drag-and-drop functionality is screwed up.

Please see an example here http://jsfiddle.net/nB8PC/1/

To reproduce my issue just enable overflow:scroll in CSS window (upper right, it is commented out) and run the script again.

Is there any solution for it?

--
You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
To unsubscribe from this group and stop receiving emails from it, send an email to prototype-scripta...@googlegroups.com.
To post to this group, send email to prototype-s...@googlegroups.com.
Visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Walter Lee Davis]

On May 7, 2013, at 7:30 AM, ayso...@gmail.com wrote:

> I have created two divs. One is for draggable objects. Another for the area where they should be dropped.
> The both divs should have the same height and if there are large number of draggables to have scrollbar.
>
> When I add overflow: scroll to the div with draggable objects, then drag-and-drop functionality is screwed up.
> Please see an example here http://jsfiddle.net/nB8PC/1/
> To reproduce my issue just enable overflow:scroll in CSS window (upper right, it is commented out) and run the script again.
>
> Is there any solution for it?

I have fixed this in the past by making the overflow property on a parent element (letting the draggable element itself be scrolled in its entirety within that parent).

Walter

[ayso...@gmail.com]

Thank you both! I will give it a try. The example in jsfiddle is basic. I have more functionality in my actual script and will look how the solution interferes with other parameters. But the Jason's example in jsfiddle looks very promising ;)

[Phil Petree]

Neither the original example or Jasons worked in IE9 with or without compatibility view

--

[Tcl Tien]

Thanks u a lot . I have problem with it and i use your solution to fixed it . Good man! 

really thanks .

Vào 18:30:01 UTC+7 Thứ Ba, ngày 07 tháng 5 năm 2013, ayso...@gmail.com đã viết: