sortable_test

by dstrohl

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div>
    <ul id="sortable1" class="connectedSortable connectedGroup1">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
        <li class="ui-state-default">Item 4</li>
        <li class="ui-state-default">Item 5</li>
    </ul>
    <ul id="sortable2" class="connectedSortable connectedGroup1"></ul>
</div>
<div id="out1" class="output"></div>
scroll down -v-
<div id="long-box"></div>
<div>
    <ul id="sortable3" class="connectedSortable connectedGroup2">
        <li class="ui-state-default">Item 6</li>
        <li class="ui-state-default">Item 7</li>
        <li class="ui-state-default">Item 8</li>
        <li class="ui-state-default">Item 9</li>
        <li class="ui-state-default">Item 10</li>
    </ul>
    <ul id="sortable4" class="connectedSortable connectedGroup2"></ul>
</div>
<div id="out2" class="output"></div>

CSS

#sortable1, #sortable2, #sortable3, #sortable4 {
    border: 1px solid #eee;
    width: 142px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
}
#sortable1 li, #sortable2 li,
#sortable3 li, #sortable4 li{
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}
.connectedSortable {
    height: 300px;
    border: 1px solid black !important;
}
#long-box {
    height: 500px;   
}
.output {
    border: 1px solid grey;
    min-height: 20px;
    float: right;
}

JavaScript

$(function () {
      $("#sortable1, #sortable2").sortable({
          connectWith: ".connectedGroup1",
          over: printInfo1
      }).disableSelection();
      $("#sortable3, #sortable4").sortable({
          connectWith: ".connectedGroup2",
          over: printInfo2
           
      }).disableSelection();
  });

function printInfo1(event,ui) {
    printInfo(event,ui,'out1');
}
function printInfo2(event,ui) {
    printInfo(event,ui,'out2');
}


function printInfo(event,ui,outName) {
    var targetLoc = ui.item.offset();
    var eventLoc = 'Event Location: X('+event['clientX']+') Y('+event['clientY']+')';
    eventLoc = eventLoc+'</br>Target Location: Top('+targetLoc['top']+') left('+targetLoc['left']+')';
    
    document.getElementById(outName).innerHTML = "eventLoc = "+eventLoc;
    
}