In this html code, is it possible to make this pop up fieldset with table draggable using jQuery?
Here is the html code below:
Here is the html code below:
HTML:
<td>
<input type="text" class="form-control rounded-0" name="item_code[]" ng-model="ir.item_code"
ng-click="showDropdown3 = !showDropdown3; selectedRowIndex = $index"
placeholder="Click to select." style="border: 4px double white; cursor: pointer"
autocomplete="off">
<fieldset id="fieldset{{$index}}" class="table-like-dropdown border p-2 bg-gradient-info"
ng-if="showDropdown3 && selectedRowIndex === $index" ng-hide="ir.item_code"
style="position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; width: 500px;">
<span class="mb-1">
<i class="fas fa-info-circle mr-1"></i>Press Esc key to close
</span>
<input type="text" class="form-control" ng-model="searchText" placeholder="Search here..."
style="border:2px solid #C04000">
<table class="table table-bordered">
<thead>
<tr>
<th class="text-center">Item Code</th>
<th class="text-center">Description</th>
</tr>
</thead>
<tbody class="bg-light">
<!-- Display "No Data Available" message -->
<tr ng-show="!isDataAvailableInTable()">
<td colspan="2" class="text-center text-danger font-weight-bold">No Data Available
</td>
</tr>
<!-- Display data if available -->
<tr ng-repeat="i in itemData | filter: searchText"
ng-if="trimText(i.item_classif) == trimText(classification1) && i.item_moduleType == 'SUPPLIES' && i.item_receiving == tradeType"
ng-click="selectItemForRow(i, selectedRowIndex)"
ng-style="{ 'background-color': hoverRowIndex === $index ? '#3498eb' : 'transparent', 'transition': 'background-color 0.2s' }"
ng-mouseenter="hoverRowIndex = $index" ng-mouseleave="hoverRowIndex = null"
style="cursor: pointer;">
<td class="pl-4" width="17%">{{i.item_code}}</td>
<td width="50%">{{i.item_shortDesc}}</td>
</tr>
</tbody>
</table>
</fieldset>
</td>