CODEWITHSUNDEEP
jquery-uiscrolljquery-ui-draggable
NPC
NPC

Reputation: 1029

Container scrolling on draggable moved to left or top

is there a good way to make the container div expand to the left and top when a draggable is dragged outside of its borders?

When you drag to the right or down the container div is properly extended, and scrollbars appear as needed. Yet moving to left or top means that the draggable items has negative top / left position, so the container is not expanded.

Here's a fiddle that demonstrates the existing dragging behaviour: http://jsfiddle.net/NPC42/Un23w/1/, but this can also be seen on the official jQueryUI demos too (http://jqueryui.com/demos/draggable/#default).

I'd like to be able to expand to the top / left too :)

A brute-force approach would be to:

  1. Reset all of the object's positions on the container div to that no negative top / left is required (including the object being dragged).
  2. Change the scrolling position to make it look as if the objects are still on their spots.

But for many objects in the container this could cause a lot of flicker, or even slowdown, so I don't really want to go in that direction. Any suggestions are welcome!

Upvotes: 3

Views: 778

Answers (1)

Nal
Nal

Reputation: 2771

The problem is that every html element has an absolute (0,0) origin coordinate in the top left corner. When you drag in that direction the coordinates for the dragable become negative. However the scrollbars can not become negative, their size can only grow in a positive direction.

I can imagine a custom scrollbars widget that can adjust in a negative direction when you drag below (0,0). Also try having a container inside of another container with the inner one move around so that all of the objects inside it don't have to be individually moved. I don't know of any in existence as it would be kinda weird to have a negative scroll offset.

Upvotes: 1

Related Questions