自动对删除的元素进行排序答案

【问题标题】：sorting a dropped element automatically自动对删除的元素进行排序
【发布时间】：2015-01-06 09:07:41
【问题描述】：

完整的代码有点复杂，所以我会直接解决问题

我有一个可放置的 div 和 sortables 元素（它们是

）来自其他位置（所有表都通过 connectWith: "table.liste>tbody" 连接）。

排序（它类似于拖放）连接到其他表，并且仅当我们将可排序对象放在表头或表内时才起作用

有部分不起作用：

$("#dvAccordian > div,#dvAccordian > h3").droppable({
            drop: function (event, ui) {//triggered when i drop on a accordion content holder or a header
                divornext = this;
                if ($(this).is("h3")) {
                    /*dropped on a header :)*/   
                    divornext = $(this).next("div");//
                }
                grid = $(divornext).find("table.liste>tbody ").first();//this is the children where i want to sort




                $(grid).trigger("sort", ui);//doesn't work 
              //the grid object is the sortable where i try to drop/sort (it works)
            }
          });

我尝试了很多次来触发事件本身或调用函数但它不起作用

当我将某处放入包含它的 div 中时，我尝试将表中的 tr 放入其中。

我在网上搜索但没有找到任何线索：3

编辑：

  <script>        /*jquery pour le sort des palettes*/
        $(document).ready(function () {
          /**********************************************/
            $("#dvAccordian > div,#dvAccordian > h3").droppable({/*c'est "droppable" ET c'est un accordion.*/
                over: function (event, ui) {
                    //console.log($(this));//repere correctement le hover
                },
                drop: function (event, ui) {
                    divornext = this;
                    if ($(this).is("h3")) {
                        /*dropped sur un header :)*/
                       
                        divornext = $(this).next("div");//
                    }
                    grid = $(divornext).find("table.liste>tbody ").first();
                    $(grid).trigger('sort',ui);
                    console.log(grid);

                   // $(this).children("table.liste>tbody").trigger("sort", ui);
                  
                }
              });
           
           
    /********************************************/
    
    
    
    
    $("table.liste>tbody ").not(".notsortable").sortable({
                connectWith: "table.liste>tbody ",
                items: ".object_tosort",
                cursor: "move",
                tolerance: "pointer",
                helper: function(event, item) {
                    return $(item).clone().css("pointer-events","none").appendTo("body").show();
                },
                refreshPositions: true,
                delay: 200,
                scroll: false,
                stop: function (event, ui) {/*appel de procedure distant*/
                }
            }).disableSelection();



            $("#dvAccordian").accordion({
                event: "mouseover dropover hoverintent"
            });

        });

       

    </script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<body>
<table style="width: 100%;">
                        <tbody><tr>
                            <td>Packing units available
                            </td>
                            <td></td>
                            <td>Loading pallets
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>
                                <div>
		<table class="liste unpacked" cellspacing="0" rules="all" border="1" id="" style="border-collapse:collapse;">
			<tbody class="ui-sortable"><tr class="notsortable">
				<th scope="col">OA</th><th scope="col">Item</th><th scope="col">SerialNumber</th><th scope="col">PN</th><th scope="col">HN</th><th scope="col">HT</th><th scope="col">Qty</th><th scope="col">CreationDate</th>
			</tr><tr class="object_tosort">
				<td>4504322301</td><td>00001 </td><td>1</td><td>2245224-05        </td><td>1</td><td>1</td><td>1</td><td>1/5/2015 11:43:15 AM</td>
			</tr>
		</tbody></table>
	</div>
                            </td>
                            <td></td>
                            <td>
                                <div id="dvAccordian" style="width: 400px" class="ui-accordion ui-widget ui-helper-reset" role="tablist">
                                    

                                            <h3 class="hoveraccordion ui-droppable ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all" style="margin-bottom : 5px" role="tab" id="><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
                                                <span id="">Pallet N° 52 (Nb PU: 2)</span>
                                            </h3>
                                            <div id="" class="ui-droppable ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 122.39999961853027px; display: none;">
                                                
                                                <div>
		<table class="liste packed" cellspacing="0" rules="all" border="1" id="" style="border-collapse:collapse;">
			<tbody class="ui-sortable"><tr class="notsortable">
				<th scope="col">OA</th><th scope="col">Item</th><th scope="col">SerialNumber</th><th scope="col">PN</th><th scope="col">HN</th><th scope="col">HT</th><th scope="col">Nb PU</th><th scope="col">CreationDate</th>
			</tr><tr class="object_tosort">
				<td>4504322301</td><td>00001 </td><td>2</td><td>2245224-05        </td><td>1</td><td>1</td><td>1</td><td>1/5/2015 11:43:15 AM</td>
			</tr><tr class="object_tosort">
				<td>4504322301</td><td>00001 </td><td>2</td><td>2245224-05        </td><td>1</td><td>1</td><td>1</td><td>1/5/2015 11:43:15 AM</td>
			</tr>
		</tbody></table>
	</div>
                                            </div>
                                        

                                            <h3 class="hoveraccordion ui-droppable ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-accordion-header-active ui-state-active ui-corner-top" style="margin-bottom : 5px" role="tab" id="ui-accordion-dvAccordian-header-1" ><span class=""></span>
                                                <span id="">Pallet N° 53 (Nb PU: 1)</span>
                                            </h3>
                                            <div id=""style="height: 122.39999961853027px; display: block;">
                                                
                                                <div>
													<table class="liste packed" cellspacing="0" rules="all" border="1" id="" style="border-collapse:collapse;">
														<tbody class="ui-sortable"><tr class="notsortable">
															<th scope="col">OA</th><th scope="col">Item</th><th scope="col">SerialNumber</th><th scope="col">PN</th><th scope="col">HN</th><th scope="col">HT</th><th scope="col">Nb PU</th><th scope="col">CreationDate</th>
														</tr><tr class="object_tosort">
															<td>4504318810</td><td>00001 </td><td>1</td><td>2245180-02        </td><td>1</td><td>1</td><td>1</td><td>1/5/2015 11:44:03 AM</td>
														</tr>
													</tbody></table>
												</div>
                                            </div>
                                        

                                            <h3 class="hoveraccordion ui-droppable ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" style="margin-bottom : 5px" role="tab" id="ui-accordion-dvAccordian-header-2" >
                                                <span id="">New PALLET</span>
                                            </h3>
                                            <div id="" class="ui-droppable ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none; height: 122.39999961853027px;">
                                                
                                                <div>
		<table class="liste packed" cellspacing="0" rules="all" border="1" id="" style="border-collapse:collapse;">
			<tbody class="ui-sortable"><tr class="notsortable">
				<th scope="col">OA</th><th scope="col">Item</th><th scope="col">SerialNumber</th><th scope="col">PN</th><th scope="col">HN</th><th scope="col">HT</th><th scope="col">Nb PU</th><th scope="col">CreationDate</th>
			</tr>
		</tbody></table>
	</div>
                                            </div>
                                        
                                </div>
                            </td>
                        </tr>
                    </tbody></table>
					
					
					
					
</body>

【问题讨论】：

你也可以添加DOM结构吗？
这里是html（计算：/因为它的一部分是动态生成的）（我试图简化一点）
这通常不是你使用widget methods的方式，并且排序事件是由排序触发的，它不会触发排序本身。试试$(grid).sortable('refresh') 或更新事件$(grid).trigger('sortupdate')
你想通过触发排序来达到什么目的？
问题是，我有我想要排序的对象，我有我想要排序的项目，并且我有一个事件 - 不是好的事件 - 并且通过触发排序我想要排序我在目标表中的项目

标签： jquery jquery-ui events jquery-ui-sortable droppable

【解决方案1】：

我最近找到了一个答案：我在手风琴 h3 和 div 上创建了一个可放置区域，并且排序在“接收”上没有任何作用

    $("#dvAccordian > div,#dvAccordian > h3").droppable({
    drop: function (event, ui) {
        divornext = $(this);
        if ($(this).is("h3")) { /*dropped on a header :)*/
            divornext = $(this).next("div");
            //we get the following div (accordion)
        }

        grid = $(divornext).find("tbody").first();//grid: the tbody that receive
        sendertbody = ui.draggable.closest("tbody");//sendertbody: ...

        //here we drop it in table with a clone
        //if not i'll be deleted.     
        ui.draggable.clone().appendTo(grid).show();
        //we remove the old item
        ui.draggable.remove();


        if (grid != sendertbody ) {
            //CODE HERE
        }


        return true;

    }
});

【讨论】：