Actually i have a table in which there are multiple tbody elements and i am swapping tbody with one another and their child inside like tr with one another and they are swapping.
Now what i want is that tr elements should be swappable inside their parent tbody and they should not swap with the tr elements of other tbody elements.
I am using:
JS:
let tableContainer = document.querySelectorAll(".draggable-zone");
let tbodyContainer = document.querySelectorAll(".tbody_draggable_zone");
function initSwappable(containers) {
if (containers.length === 0) {
return false;
}
var swappable = new Swappable.default(containers, {
draggable: ".draggable",
handle: ".draggable .draggable-handle",
mirror: {
//appendTo: selector,
appendTo: "body",
constrainDimensions: true
}
});
}
initSwappable(tableContainer);
initSwappable(tbodyContainer);
HTML:
<table
class="table align-middle draggable-zone table-row-dashed fs-6 gy-5"
id="kt_table_users"
>
<thead>
<tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
<th class="w-10px pe-2"></th>
<th class="w-10px pe-2"></th>
</tr>
</thead>
<tbody class="draggable">
<tr>
<td class="ticker_td">
<p class="fs-5">
کوٹ رادھاکشن: جڑانوالہ میں ہونے والے افسوس ناک واقعہ کے بعد ،ملکی
سیکیورٹی صورتحال کے پیش نظر کوٹ رادھاکشن شہر بھر میں پولیس کی جانب سے
فلیگ مارچ کیا گیا
</p>
</td>
</tr>
<tr>
<td colspan="12">
<div class="ticker_details_table table-responsive">
<div class="separator"></div>
<table class="table align-middle table-row-dashed fs-6 gy-5">
<tbody class="text-gray-600 fw-semibold tbody_draggable_zone">
<tr class="draggable">
<td>A</td>
</tr>
<tr class="draggable">
<td>B</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
<tbody class="draggable">
<tr>
<td class="ticker_td">
<p class="fs-5">
کوٹ رادھاکشن: جڑانوالہ میں ہونے والے افسوس ناک واقعہ کے بعد ،ملکی
سیکیورٹی صورتحال کے پیش نظر کوٹ رادھاکشن شہر بھر میں پولیس کی جانب سے
فلیگ مارچ کیا گیا
</p>
</td>
</tr>
<tr>
<td colspan="12">
<div class="ticker_details_table table-responsive">
<div class="separator"></div>
<table class="table align-middle table-row-dashed fs-6 gy-5">
<tbody class="text-gray-600 fw-semibold tbody_draggable_zone">
<tr class="draggable">
<td>C</td>
</tr>
<tr class="draggable">
<td>D</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>;