jQuery UI Current

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<ul id="list-3"></ul>
        
<ul id="list-1" class="boxed">
            <li>A</li>
            <li>B</li>
            <li>C</li>

            <li>D</li>
            <li>E</li>
            <li>F</li>
            <li>G</li>
                <li>H</li>

            <li>I</li>
            <li>J</li>
        </ul>
        
<ul id="list-2" class="boxed">
    <li>K</li>
    <li>L</li>
    <li>M</li>   
</ul>

CSS

ul { list-style-type:none; }
            ul.boxed { border:1px solid #000; margin:20px; padding:0; width:200px; height:200px; float:left; overflow:auto; }
            li { width:100%; max-width:200px; padding:5px 0; background-color:#ccc; margin:2px 0; }
            ul#list-3 { width:0;height:0;padding:0;margin:0; }

JavaScript

function test(event, element) {
    myHelper = $(element).clone();
    myHelper.show();
    $("#list-3").append(myHelper);
    return myHelper;
}

$("#list-1").sortable({
    connectWith: ["#list-2"],
    helper: test
});

$("#list-2").sortable({
    connectWith: ["#list-1"],
    helper: test
});