Develop Reference

Droppable event occasionally not working

For drag and drop functionality I am using jquery-1.12.4.js and jquery-ui.js. When I am using the droppable function of this it is some times working and some times not. This is my javascript code:
$(function() {
$(".connectedSortable").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
$(document).ready(function() {
$(".connectedSortable").droppable({
drop: function(event, ui) {
console.log("event--", event);
}
});
});
Here is my full code: http://jsfiddle.net/vgmz6qnj/1/

The stated problem boils down to the fact that this listener:
$(".connectedSortable").droppable({
drop: function(event, ui) {
console.log("event--", event);
}
});
Does not fire consistently (as shown in the posted by OP video).
My thinking is that this is due to the droppable area fluctuating in size. What I did just to test/demonstrate my theory was to make that area height 100% and with that I was not able to see a miss-fire of the droppable listener.
Here is the jsFiddle
Note the changes:
Added some CSS to make the body/html/table height 100% in order to have unlimited horizontal drop area.
Added a class to the table called tableContainer.
Please correct me if I am wrong on my assumptions.

Append big image after the small image is dragged

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
}
});

One element makes another

I have sortable elements in different sortable groups. I would like to use one element as a tool to add new elements. It should work this way: When a user drags this "add new" element to specific position there should be created new element and dragged one ("add new") should stay on it's previous position.
Do you have any idea if this is possible?

If my understanding is correct, this link may give you some idea of how to do it. Try the demo given on this page.
[link:- http://jqueryui.com/droppable/#revert]
// Here is the code copied from the same page. I have modified it a bit.
$(function() {
// Element which you will drag
$( "#draggable" ).draggable({ revert: "valid" });
// Element to which you will drag the above(draggable) element.
// On 'drop' event of this droppable you can add the element.
$( "#droppable" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
/*Write code for adding new item in the sortable list here*/
}
});
});

Find out which droppable the a draggable is in

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/

Combining jQuery Sortable and Drop Event

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)