In the jquery ui docs for draggable, we can specify a sortable to connect to:
$( ".selector" ).draggable({ connectToSortable: 'ul#myList' });
is it possible to connect to a sortable only when its visibility is set to 'visible'? Something like:
$( ".selector" ).draggable({ connectToSortable: 'ul#myList:visibility=visible' });
I don't want to let the user drop elements on my sortable target unless it is visible,
Thanks
$( ".selector" ).draggable({ connectToSortable: '#myList:visible' });
Give it a shot and see if it works. :)
Related
I'm creating a side menu in the phonegap, I need to drag to the left with a -400px wide limit, and to the right with a 400px wide limit, the problem is that I only know to do drag between parent and without limits:
$( "#draggable" ).draggable({ containment: "parent" });
or
$( "#draggable" ).draggable({ axis: "x" });
You can use Array for defining a bounding box in containment like below:
$("#draggable").draggable({
cursor: 'move',
//containment: "parent"
containment: [-400,0,400,$(document).scrollTop()+$(window).height()]
});
Online Demo (fiddle)
I have multiple boxes in a row and I have added option to resize these boxes using jQuery UI.
You can find the code on JsFiddle: http://jsfiddle.net/alokjain_lucky/ZbTem/
When I resize one box it is pushing the next one to create space. How can I restrict the boxes to push the next box out from the parent?
My jQuery Code:
$(function() {
$( ".resizeable" ).resizable({
containment: "parent",
handles: "e, w",
});
$( ".resizeable" ).resizable( "option", "alsoResize", $(this).siblings().not(this) );
});
On a web page, I want to display a small div with text in it that is cut off and displayed with ellipses and when there is a mouse-over it should expand to a larger size such that all the text is visible. I then want to be able to use jqueryui drag and drop to move the text box onto a grid. When it is being dragged and placed, I want it to be the small size again.
I have attempted to do this like so:
Mouseover function:
$(function() {
$( ".ui-widget-content" ).mouseover(function(){
$(this).css("width", "200px");
$(this).css("height", "200px");
}).mouseout(function(){
$(this).css("width", "100px");
$(this).css("height", "40px");
})
})
Draggable function:
$(function() {
$( ".ui-widget-content" ).draggable({ snap: "td.chart:not(:first-child)", snapMode: "inner", revert: "invalid", snapTolerance: 40, stack: ".ui-widget-content",
drag: function( event, ui ) {
$(this).css("width", "100px");
$(this).css("height", "40px");
}
});
});
Droppable function:
$(function() {
$( "td.chart:not(:first-child)" ).droppable({
accept: ".ui-widget-content",
drop: function( event, ui ) {
$("#" + ui.draggable.attr("id") ).css("background-color","#D7F970");
}
});
});
Div that is getting dragged and dropped:
Lorem Ipsum
I thought that by using the above, when someone went to drag the div, first the mouse over would be triggered, enlargening the div, then the dragstart would shrink it and it would be fine. However, I am placing it on a table (see selector "td.chart:not(:first-child)" in droppable function), and while it works for the first three rows of the table, the div no longer snaps and gets dropped on the fourth and fifth rows. This problem does not occur if I remove the mouse-over function. Anyone understand what is going on here?
It would maybe help to take a look at your html.
It's just a hunch but maybe it's only a matter of the size of your draggable being too big and being over more than one droppable item.
I would advise trying to change the tolerance of your droppable element to see if it helps :
$( ".selector" ).droppable({ tolerance: "pointer" });
jQuery Documentation states :
Tolerance specifies which mode to use for testing whether a draggable is 'over' a droppable. Possible values:
fit: draggable overlaps the droppable entirely
intersect: draggable overlaps the droppable at least 50%
pointer: mouse pointer overlaps the droppable
touch: draggable overlaps the droppable any amount
I'm using jQuery tabs. In one of the tabs is a wysiwyg editor that needs to be refreshed after the tab is displayed, but I can't figure out if there is an event that fires after the tab is loaded.
From my understanding, the load event is only for tabs that use ajax calls. I've tried using it but it doesn't fire:
jQuery ui tabs load/tabsload event does not fire
In that example they use an iframe, which has a load event that is triggered. I'm just using divs, which don't have a load event, and nothing like an onshow event listener.
The closest I've been able to get is the tabsselect event which fires when a tab is clicked, but before the new tab is loaded.
Is there any event that fires after the tab is loaded when I'm not using ajax?
Thanks
Did you try event-show?
http://jqueryui.com/demos/tabs/#event-show
$( ".selector" ).tabs({
show: function(event, ui) { ... }
});
The show event did not work for me, but the create event did:
$( ".selector" ).tabs({
create: function(event, ui) { ... }
});
http://api.jqueryui.com/tabs/#event-create
Now the event is called activate
$( ".selector" ).tabs({
activate: function(event, ui) { ... }
});
http://api.jqueryui.com/tabs/#event-activate
It seems that the usual method of making jQuery widgets is to call a function on an element, passing the options as a parameter, and then not touching the widget directly again. Is there a way to change a widget's options after it has been created?
I want to create a draggable box that is aligned to a grid, but if the user resizes the page, I want to scale the grid. In the window resize event, how can I access the grid property of the draggable element?
$('.box').draggable({grid: [40,40]});
...
$(window).resize(function(){ ??? });
From the Jquery ui documentation:
$( ".selector" ).draggable( "option", "grid", [50, 20] );
So you can do
$( ".box" ).draggable( "option", "grid", [width, height] );