jQuery：如何知道该项在可排序的ui中被删除了？

Question

我想知道物品在哪里掉落。例如，如果＆＃34; item1＆＃34;在第一个方框上掉落然后它将在上面的方框中列出，如果＆＃34; item1＆＃34;现在在当前box1上并拖放到其他框上，然后上面框中的列表项将转移到另一个框，即当前列出的item1。换句话说，上面的项目列表取决于下面列出的项目。我希望有人可以帮我这个

＆＃13;

＆＃13;

$("ol").sortable({
    connectWith: "ol",
    receive: function (event, ui) {
        console.log(ui.item.text());
    }
}).disableSelection();

＆＃13;

.drop1,.drop2,.drop3{
    background-image:url(http://cloud.addictivetips.com/wp-content/uploads/2014/09/Screen-Shot-2014-09-04-at-7.00.35-am.png);
    background-size:64px 64px;
    background-repeat:no-repeat;
    background-position:center;
    
}
table{
    border-collapse:collapse;
}
table tr:nth-child(1) td{
    background-color:yellow;
    border:1px solid #000;
}
table tr:nth-child(2) td{
    height:200px;
    border:1px solid #000;
}
table tr:nth-child(3) td{
    padding-top:10px;
    border:1px solid #000;
}
td{
    text-align:center;
}
div {
    width:100px;
    height:200px;
    float:left;
    margin:0;
    padding:10px;
}
li {
    list-style:none;
    padding:5px;
    border:1px solid #000;
    margin:2px;
    background-color:#ccc;
    cursor:pointer;
}
li:hover {
    background-color:#777;
}
li:active {
    cursor:move;
}
ol {
    margin:0;
    padding:0;
    height:200px;
}
body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<table>
    <tr>
        <td>Box1</td>
        <td>Box2</td>
        <td>Box3</td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>
            <div class="drop1">
                <ol></ol>
            </div>
        </td>
        <td>
            <div class="drop2">
                <ol>
                    <li>item1</li>
                    <li>item2</li>
                    <li>item3</li>
                    <li>item4</li>
                    <li>item5</li>
                </ol>
            </div>
        </td>
        <td>
            <div class="drop3">
                <ol></ol>
            </div>
        </td>
    </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试使用ui.item父class的最后一个字符作为“Box1”，“Box2”，“Box3”的选择器

$("ol").sortable({
    connectWith: "ol",
    receive: function (event, ui) {
      // filter `ui.item` parent ,
      // `.slice()` last charater of `ui.item` parent `class`
      var filter = ui.item.closest("[class^=drop]").attr("class").slice(-1);
      // "boxes" , "Box1", "Box2", "Box3"
      var tr = $("table tr:eq(1) td");
      // append `ui.item.text()` to filtered "box"
      tr.eq(filter - 1).append("<br />"+ui.item.text());
      // remove `<br>``ui.item.text()` from previous "box"
      tr.not(tr.eq(filter - 1)).html(function(i, html) {
        return html.replace(new RegExp("<br>"+"+"+ui.item.text()), "");
      });    
    }
}).disableSelection()
// at `.sortable()` initialization , 
// append `ol li.ui-sortable-handle` `html`
// to filtered "box":"Box2"
.each(function(i, el) {
  $(el).children().html(function(i, html) {
    $("table tr:eq(1) td").eq(
      $(el).parent("[class^=drop]").attr("class").slice(-1) - 1
    ).append("<br>"+html)
  });
});

.drop1,.drop2,.drop3{
    background-image:url(http://cloud.addictivetips.com/wp-content/uploads/2014/09/Screen-Shot-2014-09-04-at-7.00.35-am.png);
    background-size:64px 64px;
    background-repeat:no-repeat;
    background-position:center;
    
}
table{
    border-collapse:collapse;
}
table tr:nth-child(1) td{
    background-color:yellow;
    border:1px solid #000;
}
table tr:nth-child(2) td{
    height:200px;
    border:1px solid #000;
}
table tr:nth-child(3) td{
    padding-top:10px;
    border:1px solid #000;
}
td{
    text-align:center;
}
div {
    width:100px;
    height:200px;
    float:left;
    margin:0;
    padding:10px;
}
li {
    list-style:none;
    padding:5px;
    border:1px solid #000;
    margin:2px;
    background-color:#ccc;
    cursor:pointer;
}
li:hover {
    background-color:#777;
}
li:active {
    cursor:move;
}
ol {
    margin:0;
    padding:0;
    height:200px;
}
body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<table>
    <tr>
        <td>Box1</td>
        <td>Box2</td>
        <td>Box3</td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>
            <div class="drop1">
                <ol></ol>
            </div>
        </td>
        <td>
            <div class="drop2">
                <ol>
                    <li>item1</li>
                    <li>item2</li>
                    <li>item3</li>
                    <li>item4</li>
                    <li>item5</li>
                </ol>
            </div>
        </td>
        <td>
            <div class="drop3">
                <ol></ol>
            </div>
        </td>
    </tr>
</table>