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.
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'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'm trying to have an image inside a div of same width to be draggable in the limit of the div. It's difficult to explain but one side of the image (top or bottom) can leave the div but you cannot have a gap between the edge of the image and the border of the div.
To resume the image has the same width of the parent div but its height is bigger so a part of the image is hidden.
Well here is what I want to do:
http://jsfiddle.net/maxwell2022/DerNa/165/
It's working perfectly... because there is nothing above the div. If there is a gap between the document and the div, it's not working anymore. I think Draggable is taking the document as reference for the top of the image. As soon as you start dragging the image, the image move and stuck its top edge to the top of the document:
http://jsfiddle.net/maxwell2022/DerNa/164/
I don't know how I can achieve this with the containment option.
Cheers,
Maxime
UPDATE
Another attempt with relative positioning but no luck: http://jsfiddle.net/maxwell2022/DerNa/166/
I found a solution to fix it getting the top position of the parent div using offset() and add it to the containment boundary. I'm not sure it's the best solution but it looks like it's working.
I just have a difference of 1% in the offset at the top which is quite annoying: if you drag the image and make it stick to the top as much as possible it returns 99% offset instead of 100% (see the result in the console).
The bottom one is correct (0%). I think it's due to rounding the size but I'm not sure.
Here is the jsfiddle: http://jsfiddle.net/maxwell2022/DerNa/167/
If you have a better idea please, please, let me know.
Thanks, Maxime
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 :)
Please see http://jsfiddle.net/6XVNr/2/ for a (not very sexy) example of the issue I'm having.
I wish to resize an iframe element which has been given the jQueryUI dialog treatment. The issue I have is that I'm not sure which element I should resize.. I can resize the id of the iframe which was targeted for the .dialog() function, or I can resize the resulting ui-dialog class, which wraps around the iframe.
Resizing the iframe element only affects the height of the dialog, the width is simply hidden by the dialog. Resizing the ui-dialog class almost works perfectly.. the size is fine, but the buttonpane is not sticking to the bottom of the dialog. Which is the correct method and how can I get it fully working?
Please ignore the colours, the scrollbars, the fact it's not centred after resizing etc.. I stripped everything out for the example - also tested with a div instead of iframe and got the same results.
Thanks :)
Well it suddenly occurred to me - why not alter the height by resizing the iframe element, and the width by resizing the ui-dialog class.. seems to work ok so far :)