jQuery：如何知道該項目放在可排序的ui中？

Question

我想知道物品被放到哪里。 例如，如果“ item1”放在第一個框上，則它將在上面的框上列出；如果“ item1”現在在當前框1上，然后拖放到其他框上，則將上面的框上的列表項將被轉移到當前列出item1的另一個框中。 換句話說，上面的項目列表取決於下面列出的項目。 我希望有人可以幫助我

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

 .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> 

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>