JSFiddle - React, Tailwind, and code Playground

#9744: Sortable: incorrect value for ui.sender in sortover events

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>

<div class="a" id="s1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</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,
    helper: "clone",
}).disableSelection();

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

$(document).on("sortover", function(e, ui) {
    console.log(ui.sender ? ui.sender[0] : null);
});