jQuery UI

by fergal_doyle

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<ul class="sortable one">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
</ul>

<ul class="sortable two">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
</ul>

CSS

.sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60%;
}
.sortable li {
    margin: 0 3px 3px 3px;
    padding: 0.4em;
    padding-left: 1.5em;
    font-size: 1.4em;
    height: 18px;
}
.sortable li span {
    position: absolute;
    margin-left: -1.3em;
}

JavaScript

console.clear();
/*** /
$("#sortable").sortable({
    helper: function (e, ui) {

        console.log(e.target, ui);

        return ui.clone();

    }
});
/***/
/***/
$(".sortable.one").sortable({
    helper: 'clone',
    connectWith: '.sortable.two',
    start: function (event, ui) {
       $(ui.item).show();
    }
});
$(".sortable.two").sortable({
    
})
/***/