Question

Is there any way to drag elements onto a sortable (droppable) list? And have them added into the proper position in the list?

At first I thought I could just do this with a function using a droppable div under the list BUT my lists will get longer than the screen. Meaning users will have to scroll and at this point, I think trying to get mouse position will be meaningless.

Here is a fiddle of what I am trying to do:
http://jsfiddle.net/tvance929/E7DPk/2/

Answer 1

Just use connectToSortable and set the helper to clone, something like:

$("#theList").sortable({
    revert: true
});
$( "#dragMe" ).draggable({
    connectToSortable: "#theList",
    helper: "clone",
    revert: "invalid"
});

See here: Fiddle