JSFiddle - React, Tailwind, and code Playground

#9760: Change event is triggered on source list rather than current list when using connected sortables

by Andrei Picus

HTML

<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>

<!-- uncomment the next line to test the fix -->
<!--<script src="https://rawgithub.com/NiGhTTraX/jquery-ui/600096a4b47489054c7d04f9e699b115879a44b4/ui/jquery.ui.sortable.js"></script>-->

<div class="a" id="s1">
    <div class="aa">1</div>
    <div class="aa">2</div>
    <div class="aa">3</div>
</div>

<div class="a" id="s2">
    <div class="bb">4</div>
    <div class="bb">5</div>
    <div class="bb">6</div>
</div>

<!--<div style="clear:both;">&nbsp;</div>!-->

<div class="c">
    <div class="b">7</div>
    <div class="b">8</div>
    <div class="b">9</div>
</div>

CSS

.a div {
    width: 20px;
    height: 20px;
    padding: 5px;
    margin: 5px;
    border: 1px solid #999;
    text-align: center;
}

.a {
    float: left;
    margin-right: 50px;
}

.b {
    width: 20px;
    height: 20px;
    padding: 5px;
    margin: 5px;
    border: 1px solid #ccc;
    text-align: center;
}

.c {
    float: left;
}

JavaScript

$(".a").sortable({
    connectWith: ".a",
    forcePlaceholderSize: true
}).disableSelection();

$(".b").draggable({
    connectToSortable: ".a",
    helper: "clone"
}).disableSelection();

$(document).on("sortchange", ".ui-sortable", function() {
    console.log(this); 
});