Template templates (HTML)
The first step is to introduce jquery-ui.js files,
Import './. /.. /scripts/base/jquery/jquery-ui.min.js ';
<Tableclass= "Table-common"ID= "Aggvdttable"> <thead> <TRstyle= "width:100%;"> <thclass= "Th1"style= "width:15%;"><label for= "Aggvdtselectall"><inputtype= "checkbox"V-model= ' Aggvcheckalldt '@click= ' Checkedaggvalldt () 'name=""ID= "Aggvdtselectall"value="" />Select All</label></th> <thclass= "Th2"style= "width:30%;">Output</th> <thclass= "Th3"style= "width:40%">Demand</th> <thclass= "Th4"style= "width:15%;">Move</th> </TR> </thead> <tbody> <TRv-for= "(items, index) in Aggregatevalue": Key= "Aggregatevaluedt.uniqueid + index"> <TD><inputtype= "checkbox"name=""value=""V-model= ' Items.ischeck '@change= "Aggvsingleselectdt ()"/></TD> <TDclass= "Right"contenteditable= "true">{{Items.rulename}}</TD> <TDclass= "Right"Data-toggle= "Modal"Data-target= ". Modalshow"@click= "Aggdtitem = items"style= "Cursor:pointer">{{Items.rulespectext}}</TD> <!--<td style= "Display:none" >{{items.ruleSpec}}</td> - <TDclass= "DRAGTD"style= "Cursor:move"@mousemove= "dragtr ($event, items)"><Iclass= "fa fa-arrows"></I></TD> </TR> </tbody></Table>
JS Code:
//Custom Dimension metrics table can drag row sort (jquery-ui)
//Drag the width of the line settingFixhelper (E,ui) {Ui.children (). each (function() { $( This). Width ($ ( This). width ()); }); returnUI; }, DRAGTR (Event,item) {varthat = This; $( "#aggVDtTable tbody"). Sortable ({cursor:"Move", helper:that.fixHelper, axis:"Y", revert:true,//when released, increase the animationHandle: ". DRAGTD" , }); $( "#aggVDtTable"). Disableselection (); return false; },
Drag-and-drop sorting of table rows using plug-ins (jquery-ui.js)