When user is trying to drop the element in the droppable zone the dragged element lies half inside the droppable zone and other part out of the container
You need to check if the .prop('scrollWidth') is greater than the container's .outerWidth(). If so, resize or re-position the dropped element.
Related
I'm working on a project whare I need to allow drag and dropping from a sidebar to some content.
It is very important, that the content (when hovering it with the draggable) expands with applying some padding (to the inner content, in the example code an image).
When I enter the droppable with the draggable, the padding is added,
which makes the droppable a bit bigger in size (both width and height).
Jquery UI does not "recognize" this change in size, it means that when I move the draggable a bit closer to the bottom border (or to the right border), the "out" event is already triggered (even if it's clear that the draggable is still within the (new) boundaries of the droppable).
Only after moving the draggable a lot around (going close to the left and top border without leaving the droppable), jquery ui "recognizes" the new (bigger) size of the droppable, and you can move very close to the bottom or right border of the box, without triggering the "out" event.
for my project, it is very important, that I can go fully to the bottom and right border of the droppable, without the "out" event being fired.
Anybody has a clue how can I "teach" jquery ui in drag mode that the size of the droppable has changed? (without moving around in the droppable and aproaching left and top border)
I analyzed the problem in jquery UI.
it comes from the fact that the method "prepareOffsets" is only called when you move the draggable to the upper edge of the expanded droppable. "prepareOffsets" is correcting the new size of droppable and everything works correctly.
A small patch in the
$.ui.plugin.add( "draggable", "scroll", {
Plugin, method:
drag: function( event, ui, i ) {
fixed that problem. Instead of calling "prepareOffsets" only when near the top of the droppable,
insert the following line:
if (scrolled == false){scrolled = true;}
just above the last if statement of "drag" method.
Above this statement:
if ( scrolled !== false && $.ui.ddmanager && !o.dropBehaviour ) {
$.ui.ddmanager.prepareOffsets( i, event );
}
It is maybe not a perfect solution (as it maybe calls "prepareOffsets" too often), but it solves all the problem I had with the expanded droppable.
"over", "out" and "drop" works correctly with that patch.
Cheers
I have list of draggable elements in one div and list of droppable elements in another div.I want to pick the elem from draggable elements and drop on droppable elements. I have scroll for droppable container. While dragging and dropping, If the draggable element reaches the end position on droppable container, I need the droppable container to be scrolled (i.e the default behaviour of browser scroll, when mouse point reaches to end point it automatically scrolls).
I am using jquery drag and drop component. The droppable container scroll is not page scroll. I have so many divs and so many scrolls in the page and one of them is droppable container list.
my code is:
elem.addClass(randomClass)
.draggable({ appendTo: "body, helper: 'clone' });
Currently, the droppable container is not scrolling while dragging on droppable area. I have seen all the solutions but did not get what I need. All the solutions are related to page scrolls. Please help me.
I have a table where each row is draggable using JQuery ui. These rows can be dropped into another droppable element on the page. I'm using the cursorAt option to set the cursor to be centred on the x axis and just to the left of the dragged row whilst dragging so not to obscure the data . My problem is I can only drop the content when the centre of the draggable object is inside the droppable one. I need it to be able to drop the draggable object based upon the cursor position. I.e the cursor is inside the droppable object when dragging but the actual draggable object(helper) is outside.
Hopefully this makes sense...
Any ideas?
Thanks
I have an image at http://jsfiddle.net/3GWL2/2/ that I want to make draggable and resizable:
I'm experimenting with three lines:
1. //$('#clown').draggable();
2. //$('#clown').draggable().resizable();
3. //$('#clown').resizable().draggable();
If I only uncomment line 1 the image is draggable fine.
If I only uncomment line 2 the image is resizable but it's not draggable.
If I only uncomment line 3, the image is draggable, but but only within the original size, and the image is resizable.
Apparently resizable and draggable are far from independent of each other. Could someone explain what's going on here?
Thanks
jQuery UI's .resizable() makes your element resizable by adding a ui-wrapper div around your element that is initially the same size as your element, and setting your element to fill both height and width. Making your element draggable only allows it to be dragged within the ui-wrapper div.
If you want to be able to both drag and resize, apply .resizable() first, then make the wrapper draggable by calling .parent().draggable() on your element.
$('#clown').resizable(); //adds a new parent to #clown
$('#clown').parent().draggable(); //makes the new parent draggable
1: The resizable widget creates a wrapper div with css property overflow:hidden
2: The draggable is being moved by changing: top and left property.
3: scenario's:
3.1 When you first initialize the resizable and then draggable, the draggable will get position:relative, relative to the wrapper created by the resizable.(and will get trapped inside the wrapper created by the resizable).
3.2 When you first initialize the draggable and then the resizable, the draggable will get position:static. If you use dev tools in chrome and move the draggable you will see that the top and left properties are changed however the draggable with property position:static will stay inside the wrapper created by the resizable(and visually stay on the same place).
4: this is actually a cool question, because i never really delved into inner workings of the widgets and how they interact with css. Thank you, now i can't sleep until i figured it out :)
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:
Reset all of the object's positions on the container div to that no negative top / left is required (including the object being dragged).
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!
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.