完整的代码有点复杂,所以我会直接解决问题
我有一个可放置的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;
答案 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;
}
});