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)
Related
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 have a "draggable only" block where I have some images and another "sortable only" block where I can drop the items from the "draggable only".
What I want to do is when I drag the image into "sortable only" to append the larger version of the dragged image which is hosted on my server.
I think this can be relatively easy to do if there is a way to check when the item is dragged into the sortable list and then append the new image.
This is the actual JS :
$(document).ready(function () {
$(".sortableList").sortable({
revert: true,
/*update: function (event, ui) {
// Some code to prevent duplicates
}*/
});
$(".draggable").draggable({
connectToSortable: '.sortableList',
cursor: 'pointer',
helper: 'clone',
revert: 'invalid'
});
});
Here is a jsfiddle with what I currently have:
(Hover over the "Headers" and there you should drag an image into "HOVER OVER HEADERS AND DROP IMAGES HERE" block)
I've looked trhrough the plugin API but I can't find a way to track when the item was dragged into the sortable area ?
Any suggesions on how can I do this ?
If I understand what you're shooting for, a receive function on your sortable list should work.
Working Example
$(".sortableList").sortable({
receive: function (event, ui) {
alert('It works');
}
});
The documentation says:
This event is triggered when an item from a connected sortable list
has been dropped into another list. The latter is the event target.
But apparently it will also fire when using a connected draggable.
I was looking the jQuery UI API and found this:
$( "#sortable li" ).droppable({
drop: function( ) {
//do the magic
}
});
I am trying to setup somme kind of drag and drop wysiwyg editor using JQuery UI.
I have succesfully setup the elements but they have a strange behavior.
It is almost impossible to sort items because of the constant flickering.
i setup my draggables like this:
el.draggable({
containement:'.main-form-container',
revert: "invalid",
connectToSortable: '.sortable'
}).disableSelection();
If i dont set it as draggable the sortable will place the placeholder on itself! why?
Sometimes when an element is dropped into another it becomes ONE draggable element and seem tobe glued together. though that seems fixed with overriding sortable update:
update: function (event, ui) {
$(ui.item).css({
position: 'relative',
top:0,
left:0,
width: 'auto'
});
// init droppable draggable and sortable on this item
setupDandD($(ui.item));
}
and the setupDandD method:
setupDandD($('.form-container'));
function setupDandD(el) {
el.draggable({
containement:'.main-form-container',
revert: "invalid",
connectToSortable: '.sortable'
}).disableSelection();
el.droppable({
accept: '[data-section="toolbox"]',
greedy: true,
hoverClass: 'droppable-hovered',
drop: handleDrop
}).disableSelection();
el.filter('.sortable').sortable({
tolerance:'pointer',
containement:'.main-form-container',
connectWith: ".sortable:not(#" + $(this).id + ")",
revert: 'invalid',
helper: function () {
return $(this);
},
update: function (event, ui) {
console.log('here');
$(ui.item).css({
position: 'relative',
top:0,
left:0,
width: 'auto'
});
setupDandD($(ui.item));
}
}).disableSelection();
};
I guess I need to pickup some event somewhere on the sortable but i am quite lost now...
Well well! I found it!
Actually my biggest mistake was to mix droppable and sortable at the same time. I just had to use sortables and draggables with the connectToSortable option set.
The other weird behavior I had was the sortable trying to insert into itself. This is because sortable "connectWith" was set to a selector that returned self and therefor it instantly placed the placeholder on self when dragged. Quite logical actually!
To overcome this I just surrounded each child sortable with a div. It makes the div a sortable item and prevents triggering the events on self.
One thing to take into consideration when using draggable+sortable is that the sortable will always clone the object as it was when drag started. Meaning that even if you use a custom helper on the draggable, it will still insert the original item. For this I had to replace the item in the "stop" event of the sortable by the one i wanted if it came from my toolbox:
$('.main-form-container').sortable({
placeholder: "sortable-placeholder",
opacity: .35,
connectWith: ".sortable",
stop: function (e, t) {
if (t.item.attr('data-section') == "toolbox") {
$(t.item).replaceWith(createContainer());
}
$(".sortable").sortable({
opacity: .35,
placeholder: "sortable-placeholder",
connectWith: ".sortable"
}).disableSelection();
}
}).disableSelection();
and here is the working fiddle: http://jsfiddle.net/jmorvan/ag659/
I realize there is probably a cleaner way of doing this last fix by overriding some maybe undocumented event in sortable/draggable, but that did the trick for me!
I have one calendar on which i have events at particular time on that calendar.
In the design of that calendar i used table. Each td states a particular time for the particular resource.
Now i want to add drag and drop facility to this calendar so that users can reschedule their events by drag and drop.
JS Files are :
- jQuery UI 1.8.11
- jQuery JavaScript Library v1.4.1
I am using this code for drag and drop :
$(".event1").draggable();
$(".timetd").droppable({
accept: '.event1',
hoverClass: 'droppable-hover',
drop: function(event, ui) {
alert('yes');
}
});
But this is not working means nothing is happened when i drag div.
Can anyone please help me ?
My code is like this fiddle :
http://jsfiddle.net/mausami/xp786/
Update Answer
Check here , DEMO http://jsfiddle.net/yeyene/xp786/4/
*Try to drop on 08:30 time slot.
And you cannot drop because there is no .timetd class to drop yet.
$(function() {
$( ".event1" ).draggable();
$( ".timetd b" ).droppable({
accept: '.event1',
drop: function (event, ui) {
alert('yes');
}
});
});
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/