自动对丢弃的元素进行排序

Question

完整代码有点复杂所以我直接进入问题

我有一个来自其他位置的可丢弃 div 和 sortables 元素（即 < TR>）（所有 tables 都通过 connectWith 连接："table.liste>tbody ").

排序（好吧，它是拖动&drop-like）连接到其他 table，并且仅当我们将 sortable 放在 table [=39 上时才起作用=] 或 tables

内

有部分不起作用：

$("#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)
            }
          });

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

我尝试将我在 table 中的 tr 放到包含它的 div 中。

我在网上搜索过但没有找到任何线索: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>

Answer 1

我最近找到了一个答案：我在我的手风琴 h3 和 div 上创建了一个可放置区域，并且排序在 "receive"

上没有任何作用

    $("#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;

    }
});

自动对丢弃的元素进行排序

sorting a dropped element automatically

jquery

events

jquery-ui

droppable

jquery-ui-sortable