Is there any way to set the "item" options in jquery sortable dynamically?

See more:

CSS

jQuery

HTML5

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>&nbsp;</th>
                            <th>A</th>
                            <th>B</th>
                            <th>C</th>
                            <th>D</th>
                            <th>E</th>
                            {{tmpl($value) "#myDynamicColumn"}}  
                            <th>&nbsp;</th>
                            <th style="width: 100%;">&nbsp;</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>&nbsp;</th>
                            <th>A</th>
                            <th>B</th>
                            <th>C</th>
                            <th>D</th>
                            <th>E</th>
                            {{tmpl($value) "#myDynamicColumn"}}  
                            <th>&nbsp;</th>
                            <th style="width: 100%;">&nbsp;</th>
                        </tr>
                    </thead>
                //<tbody id='tbody1'></tbody>
                    <tbody><tr>
                            <th>&nbsp;</th>
                            <th>A</th>
                            <th>B</th>
                            <th>C</th>
                            <th>D</th>
                            <th>E</th>
                            {{tmpl($value) "#myDynamicColumn"}}  
                            <th>&nbsp;</th>
                            <th style="width: 100%;">&nbsp;</th>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

I want to implement this "requirement"

Plus, I am implementing the jquery sortable.

$(tableBody).sortable("destroy"); //Remove soratable plugin if already applied.
            $(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.