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.
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
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.
I have multiple divs with absolute positioning on a page, all with the same class.
Is there a way to restrict resizing each of the divs so that they do not overlap any of the other divs of the same class?
You can use the resize event from jQuery-ui resizable. Calculate if your element is about to pass another elements top/left positions and prevent it from doing so by setting the maxWidth to it's current width.
Source:
Prevent jQuery UI resizable element from covering another element?
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 :)