I am trying to use draggable in jquery UI to drag the images .
However , I am able to drag image, disable dragging and enable dragging.
But after disabling the dragging I am unable to enable the dragging again.
Here's the fiddle:
Code:
//Please Check this fiddle
[Fiddle] : http://jsfiddle.net/Subhasish2015/yrLbyzfg/8/
You should use jquery draggable enable and disable method, like this:-
// sets draggable the element with id="dg"
$("#disable").on('click', function() {
$( "#im" ).draggable( "disable" );
});
$("#enable").on('click', function() {
$('#im').draggable({
containment: "#drg"
});
$( "#im" ).draggable( "enable" );
});
Fiddle
Related
I have created a container which is not resizable during initialization but when I'm clicking it it's width is expanding and then it is resizable,and on clicking again it's width it again contracting and the container becomes not resizable. However the problem is I'm able to disable resizable on the container but resize cursor is still there, how can I remove it ?
I'm using this code:
// while intializing
$(".container").resizable({
disabled:true,
handles:"e,w"
});
//on Click event
disableSideBarResize: function() {
$(".container").resizable().resizable("disable");
},
enableSideBarResize: function() {
$(".container").resizable().resizable("enable");
},
But I'm not able to remove the resize cursor/icon. Can anyone please help me with this?
Syntax:
$( ".selector" ).resizable( "disable" );
CDN Link: First, add jQuery UI scripts needed for your project.
code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css
Blockquote
code.jquery.com/jquery-1.12.4.js And code.jquery.com/ui/1.12.1/jquery-ui.js
Check the link
https://www.geeksforgeeks.org/jquery-ui-resizable-disable-method/
I am trying to use Sortable Widget to create a connect list where I have two containers one with available items and the other one where to drop items into.
I need to be able to do something when the item is moved from the left container to the right container.
This is my code to create both containers.
I tried to capture change event but that does not tell me if the item was added or not.
$( "#sortable").sortable({
connectWith: ".connectedSortable_1"
});
$( "#selected_sortable").sortable({
connectWith: ".connectedSortable_1",
change: function(e,i){
console.log(e);
}
});
What event can I fire to figure if the Item was moved from the left container to the right container?
You want to listen for the receive event of Sortable.
$( ".selector" ).on( "sortreceive", function( event, ui ) {} );
I'm using jQuery UI to perform some drag and drops. I'm trying to find out what droppable a draggable is in.
Can anyone help? Here's my code.
$(".draggable").draggable({
stop: function(event, ui){
console.log(event);
// I need the element which this draggable is correct in.
}
});
I think #Patricia has it slightly the wrong way round. Ive forked their jsfiddle here but the essence is in getting the id of the item dropped into
$('.droppable').droppable({
drop: function( event, ui ) {
alert($(this).attr("id"));
}
});
i think you'll need to catch that in the droppables drop callback.
$('#draggable').draggable();
$('#droppable').droppable({
drop: function( event, ui ) {
alert($(this).attr("id"));
}
});
here's a look at this fiddle to play around with it:
http://jsfiddle.net/2vsC4/
edit: oops, that's the id of the dragged element! you want where it landed! which is easy! I've edited the script here in the answer to show that.
take a look at the draggable and droppable documentation for more info about how they work:
http://jqueryui.com/demos/draggable/
http://jqueryui.com/demos/droppable/
I am using the draggable function for the element using jquery..when I use this the click function is not working on that..why is that and how to remove this bug? pls help me
// Reizable and draggable for the YOUTUBE widget**************
$(function() {
$( "#youtube" ).draggable(
{cursor: 'move'}
);
$( "#youtube" ).resizable({
ghost: true,
alsoResize: '#player',
handles: "n, e, s, w"
});
});
probably because the click event requires the mouse to go down and up. if you're dragging, that never fires. Try using the mousedown event instead.
Basically I have a draggable list which is connected with a sortable list. Works great except I need some sort of Drop event which I can use to change the list item after its dropped into the sortable list.
This works with .draggable -> .droppable but is there a fix for draggable -> .sortable?
Figured out, turns out there is a receive event which is the same as drop for the droppable.
$('.selector').sortable({
receive: function(event, ui) { ... }
});
Why don't you use 2 sortable lists that are connected ? Then you can use the stop event
You can connect 2 lists by doing:
$("#sortable1, #sortable2").sortable({
connectWith: '.connectedSortable'
}).disableSelection();
And then use the stop event
$( ".selector" ).sortable({
stop: function(event, ui) { ... }
});
You can then change the dropped element by doing ui. (don't know this by heart but with the draggable plugin its ui.draggable)