自动排序掉落的元素

时间:2015-01-06 09:07:41

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

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

我有一个可放置的div和sortables元素(来自< TR>)来自其他安置(所有表都通过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>
&#13;
<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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分: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;

    }
});