I have a table in a div with left margin:
<div id="Div1" style="${fixedStyle}">
<div class="tblOuter" id="Div2" style="z-index: 1000;bottom: auto; overflow:hidden;">
<div class="tblInner" id="Div3" style="overflow:hidden;">
<table id="Table1" class="fixedColumn">
<thead>
<tr>
<th> </th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
{{tmpl($value) "#myDynamicColumn"}}
<th> </th>
<th style="width: 100%;"> </th>
</tr>
</thead>
</table>
</div>
</div>
<div class="tblOuter" id="Div4" style="z-index: 10;">
<div class="tblInner" id="Div5">
<table id="Table2" class="fixedColumn">
<thead>
<tr>
<th> </th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
{{tmpl($value) "#myDynamicColumn"}}
<th> </th>
<th style="width: 100%;"> </th>
</tr>
</thead>
//<tbody id='tbody1'></tbody>
<tbody><tr>
<th> </th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
{{tmpl($value) "#myDynamicColumn"}}
<th> </th>
<th style="width: 100%;"> </th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I want to implement this
"requirement"
Plus, I am implementing the jquery sortable.
$(tableBody).sortable("destroy");
$(tableBody).sortable({
placeholder: 'ui-state-highlight',
items:'tr.sortable-row',
update: function (event, ui) {
},
helper: function (e, ui) {
},
start: function (event, ui) {
},
forceHelperSize: true,
forcePlaceholderSize: true
}).disableSelection();
* Now my issue is As I have given "
tr.sortable-row
" to items:options.
While dragging the row half "non-freeze" column is only dragging. :(
What I have tried:
i have tried to set the item "selector" by replacing its margin-left: -400px(as i have given earlier).
couldn't able to set.