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 :)
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 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'm using jQuery ui for the draggable function. I have snap on my parent object. The problem is the following: when the object snaps to the parent, it gets "top: -1px, left: -1px".
How can I prevent this and make it snap to 0 rather than -1?
See this jfiddle + Inspector to see what I mean:
jsfiddle.net/Fredettiw/L0dmzstq
As soon as you move the rectangle, it snaps to the .page, but it gets -1px.
(Sorry i couldnt link the jsfiddle with http, because I got an Error every time I tried to save as a link)
Only first time when the object snaps to the parent it gets "top: -1px, left: -1px". The reason is the parent border (border:1px solid black;). If you give parent border 10 px then it will get "top: -10px, left: -10px".
I have created 3 jsfiddle for you. In first one I removed parent border and added background property for parent (background: lightgray;) to test whether the parent border is causing issue which indeed is the root cause of the issue.
Please have a look at first jsfiddle:
http://jsfiddle.net/Ashish_developer/cfcvyng3/
In second jsfiddle I have not removed border from parent but added top and left margin to draggable object.(ex. if parent border is 10px then give top and left margin 10 px to draggable object). It is working fine.
Second jsfiddle URL:
http://jsfiddle.net/Ashish_developer/7k8h131e/
In third jsfiddle I have not changed your CSS but jQuery code. Though this fiddle also serves the purpose but in this code draggable object can be dragged within the parent object not outside of it.
Third jsfiddle URL:
http://jsfiddle.net/Ashish_developer/fr4bcpu5/
Second jsfiddle is working fine and fixes your issue.
I have an image in this jsfiddle - http://jsfiddle.net/stevea/5S5NW/4/ - that I've made resizable and then I've made it draggable by applying draggable() to the ui-wrapper that resizable put around the image:
$(function(){
$('img#pelican').resizable({aspectRatio : true});
$('img#pelican').closest('.ui-wrapper').draggable();
});
After resizable() and draggable() have first been applied the ui-wrapper has a position:relative style, as you can see with Firebug. And this remains as you drag the image around. But as soon as you start to resize the image the ui-wrapper style changes to position:absolute. Why does this happen?
If I force the position back to relative with the button, it just goes back to absolute as soon as I resize it again. If I leave out the draggable() line, so the image is just resizable, it works ok, i.e., stays position:relative after a resize.
Does anyone know what's going on here? How can I create a resizable, draggable image that stays position:relative?
Thanks
I updated the fiddle: http://jsfiddle.net/5S5NW/5/
You can find the resize event in this docu: http://api.jqueryui.com/resizable/#event-resize
What I do is simple. While resizing I add css the css property position relative:
resize: function(){
$(this).css('position', 'relative');
}
Keep in mind that theres a reason why jquery setting its position to absolute. Check the browsers and necessary functions if everything is orking as expected.
I am using jquery-ui draggable. When I drag my box to beyond the bottom of the screen, the body shifts down. How can I prevent this from occurring?
Tried...
I have tried making the draggable to be containment: "*tag*" where tag is html or body.
Still trying containment, I have tried surrounding the layout with a div, however, this breaks the layout scroll-ability of LHS, RHS and center.
The problem is solved by making the body - position: static !important. This then breaks the layout.
For reference, here is the jquery-ui draggable page.
Css Layout
I have a layout which is header, fixed-height-footer, left and right fixed-width-scrollable, fluid center-scrollable. The header and footer is achievable using a large body border hack. See this question for information on the layout. How to have a 3 column layout with fixed left/right, fluid middle and fixed footer?
Reproduction of the problem.
Here is my Fiddle: http://jsfiddle.net/valamas/LrXCA/
Please click and drag the blue box below the footer to see a black band or a further pink band.
Pass scroll: false to your draggable constructor.
By default the auto-scroll option is set to true, if you don't want it, you have to specify scroll: false when creating the draggable. See scroll option on the jQuery draggable page.
Working jsFiddle