How do I disable a jQuery draggable, e.g. during an UpdatePanel postback?
Could create a DisableDrag(myObject) and a EnableDrag(myObject) function
myObject.draggable( 'disable' )
Then
myObject.draggable( 'enable' )
To temporarily disable the draggable behavior use:
$('#item-id').draggable( "disable" )
To remove the draggable behavior permanently use:
$('#item-id').draggable( "destroy" )
To enable/disable draggable in jQuery I used:
$("#draggable").draggable({ disabled: true });
$("#draggable").draggable({ disabled: false });
#Calciphus answer didn't work for me with the opacity problem, so I used:
div.ui-state-disabled.ui-draggable-disabled {opacity: 1;}
Worked on mobile devices either.
Here is the code: http://jsfiddle.net/nn5aL/1/
enabledisabledraggablejqueryopacityproblemhtml
It took me a little while to figure out how to disable draggable on drop—use ui.draggable to reference the object being dragged from inside the drop function:
$("#drop-target").droppable({
drop: function(event, ui) {
ui.draggable.draggable("disable", 1); // *not* ui.draggable("disable", 1);
…
}
});
HTH someone
Seems like no one looked at the original documentation. May be there was no it at that time))
Initialize a draggable with the disabled option specified.
$( ".selector" ).draggable({ disabled: true });
Get or set the disabled option, after init.
//getter
var disabled = $( ".selector" ).draggable( "option", "disabled" );
//setter
$( ".selector" ).draggable( "option", "disabled", true );
In the case of a dialog, it has a property called draggable, set it to false.
$("#yourDialog").dialog({
draggable: false
});
Eventhough the question is old, i tried the proposed solution and it did not work for the dialog. Hope this may help others like me.
The following is what this would look like inside of .draggable({});
$("#yourDraggable").draggable({
revert: "invalid" ,
start: function(){
$(this).css("opacity",0.3);
},
stop: function(){
$(this).draggable( 'disable' )
},
opacity: 0.7,
helper: function () {
$copy = $(this).clone();
$copy.css({
"list-style":"none",
"width":$(this).outerWidth()
});
return $copy;
},
appendTo: 'body',
scroll: false
});
I have a simpler and elegant solution that doesn't mess up with classes, styles, opacities and stuff.
For the draggable element - you add 'start' event which will execute every time you try to move the element somewhere. You will have a condition which move is not legal. For the moves that are illegal - prevent them with 'e.preventDefault();' like in the code below.
$(".disc").draggable({
revert: "invalid",
cursor: "move",
start: function(e, ui){
console.log("element is moving");
if(SOME_CONDITION_FOR_ILLEGAL_MOVE){
console.log("illegal move");
//This will prevent moving the element from it's position
e.preventDefault();
}
}
});
You are welcome :)
Change draggable attribute from
<span draggable="true">Label</span>
to
<span draggable="false">Label</span>
Related
I am using JQuery UI for drag and drop in my project.
On the draggable element, I have Bootstrap (3.x) tooltip.
Moving the mouse over the draggable shows the tooltip.
I hope to remove/hide tooltip on the draggable clone when drag starts. I goolged and tested, but to no success.
Here is jsfiddle setup of the whole thing. Link: http://jsfiddle.net/mddc/6md9h/18/
<div id="draggable" class="ui-widget-content">
<div data-toggle="tooltip" data-original-title="Tooltip to disappear when drag starts.">Drag me</div>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
Here is javascript code:
$(function() {
$( "#draggable" ).draggable({
start: function(event, ui) {
//this is what I hope to work, but not working!
$(ui.helper).find('[data-toggle="tooltip"]').tooltip('hide');
},
helper: 'clone',
revert: "invalid"
});
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
$('[data-toggle="tooltip"]').tooltip({
'animation': true,
'placement': 'bottom'
});
});
Thanks for any help!
You can hide you tooltip child element.
Code:
$( "#draggable" ).draggable({
start: function(event, ui) {
$(ui.helper).find('.tooltip').hide();
},
helper: 'clone',
revert: "invalid"
});
Demo: http://jsfiddle.net/9RwHh/
Why not just use
start: function(ev, ui){
$('.tooltip').remove();
}
At one point there will be only one element with "tooltip" class available in the document. So it should be a safe bet to just remove it.
How can I set a callback function to be ran when a modal dialog is closing, without the click of a button or close (x) icon?
you can also try,
$( ".selector" ).dialog({
beforeClose: function(event, ui) { ... }
});
This event is triggered when a dialog attempts to close. If the beforeClose event handler (callback function) returns false, the close will be prevented.
Why dont you try the event close of jQuery UI dialog?
Code examples
Supply a callback function to handle the close event as an init option.
$( ".selector" ).dialog({
close: function(event, ui) { ... }
});
Bind to the close event by type: dialogclose.
$( ".selector" ).bind( "dialogclose", function(event, ui) {
...
});
I have four divs that are draggable. And a div where I drop the daggable divs. My code is basically just an API I've downloaded and modify a little form jQuery's sites.
My problem is that all the divs have the same function when they are dropped. How can I make individual functions to individual divs?
It looks like this:
$(function() {
$("#draggable").draggable({ revert: "invalid" });
$("#draggable2").draggable({ revert: "invalid" });
$("#draggable3").draggable({ revert: "invalid" });
$("#draggable4").draggable({ revert: "invalid" });
$("#droppable").droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function(event, ui) {
if (document.getElementById('draggable')){
window.location.replace("http://www.example.com");
}
if (document.getElementById('draggable2')){
window.location.replace("http://www.example2.com");
}
if (document.getElementById('draggable3')){
window.location.replace("http://www.example3.com");
}
if (document.getElementById('draggable4')){
window.location.replace("http://www.example4.com");
}
}
});
});
No luck in this code. Any ideas?
Thanks in advance!
Regards, VG
In your 'if' statements you need to do something like:
if(ui.draggable.attr('id') === 'draggable')
{
// do stuff
}
I have modules of different sizes, I want the placeholder to be of the same size of the module being dragged, this is what I have figured out so far...
$( "#col1, #col2, #col3" ).sortable({
connectWith: ".col",
start: function(event, ui) {
var type = ui.item.hasClass("double") ? " double": "";
},
placeholder: "module drop" + type
}).disableSelection();
My problem is that I'm trying to use var "type" outside the scope of start, but I can't figure any other way of doing this.
If anyone wants to play around with the code, I've set up a fiddle here:
http://jsfiddle.net/TfcQq/
According to jquery ui documentation ( http://jqueryui.com/demos/sortable/#placeholder ), there is a setter for placeholder.
Be careful with spaces in the value, looks like it is a css class.
So you can try :
$( "#col1, #col2, #col3" ).sortable({
connectWith: '.col'
}).disableSelection();
$(".module").mouseover(function(){
$( "#col1, #col2, #col3" ).sortable( "option", "placeholder", 'drop-single' );
});
$(".module.double").mouseover(function(){
$( "#col1, #col2, #col3" ).sortable( "option", "placeholder", 'drop-double' );
});
I am trying to override close method of Jquery Dialog method.
Code :
jQuery.Dialog.close = function() {
alert('my close');
}
But its not working. Please help.
There is an event called beforeClose which would allow you to do what you want, I think. When it fires, you can hide the dialog, then return false, which would prevent the dialog from actually closing.
$( ".selector" ).dialog({
beforeClose: function(event, ui) {
$(this).hide();
return false;
}
});
Reference: http://jqueryui.com/demos/dialog/ under the Events tab below the example
You're setting it up wrong. Check this out to see how to do it correctly.
Ok, so that link doesn't take you where I thought it would. Here's the relevant bit from jqueryui.com.
closeType:dialogclose
This event is triggered when the dialog is closed.
Code examples
Supply a callback function to handle the close event as an init option.
$('.selector').dialog({
close: function(event, ui) { ... }
});
Bind to the close event by type: dialogclose.
$('.selector').bind('dialogclose', function(event, ui) {
...
});