JQuery Drag N Drop Issue Between Containers

Question

Ok i'm having an issue here where I have draggables and droppables the weird thing is that once I drop it on a container I have to recreate the draggable to move it back.

Basically I have the origin

$("#mykeys ul li").draggable({
revert:"invalid",
helper: "clone",
cursor: 'move'});

then i have the droppable block. The issue im having is how to get the actual droppable blocks to drag n drop between eachother.

SO Basiclly I can drag n drop from the origin to the class containers but i cant drag n drop between the class containers

Do I need to use sortables?

Here is the JS Fiddle

http://jsfiddle.net/rmatakajr/FN7Xx

Thank for your help

Answer 1

Try

$(".drop-container").droppable({
    activeClass: "ui-state-highlight",
    accept: "#mykeys ul li, .drop-container li",
    //connectWith: ".drop-container",
    drop: function (event, ui) {
        $(this).empty();
        $(ui.draggable).appendTo(this);
    },
    out: function (event, ui) {
        console.log('dragged out');
    }
});

Demo: Fiddle