拖放整个表格行答案

【问题标题】：Drag and drop whole table row拖放整个表格行
【发布时间】：2015-06-10 05:34:49
【问题描述】：

我正在使用这个插件：http://codef0rmer.github.io/angular-dragdrop/#/ 用于拖放目的。我无法拖放表格行。以下代码仅适用于单个列。谁能帮我解决这个问题？

<table >
            <tr>
                <th>title</th>
                <th>Category</th>
            </tr>
            <tr ng-repeat="item in list5" >
                <td data-drag="{{item.drag}}" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list5" jqyoui-draggable="{index: {{$index}},placeholder:true,animate:true}">{{item.title}}</td>
                <td data-drag="{{item.drag}}" data-jqyoui-opti`enter code here`ons="{revert: 'invalid'}" ng-model="list5" jqyoui-draggable="{index: {{$index}},placeholder:true,animate:true}">{{item.category}}</td>
            </tr>
        </table>

【问题讨论】：

需要添加data-drag到tr tag nod td tag
你能帮我解决这个问题吗？我可以在 data-drag 上绑定哪些数据而不是 --> data-drag="{{item.drag}}" 以便添加到 tr？

标签： javascript angularjs jquery-ui drag-and-drop

【解决方案1】：

我有一个使用角度拖放插件对表格行排序（拖放）的解决方案。它必须为你工作。

<tr ng-repeat="item in list5" data-drop="true" data-drag="true"
        ng-model="list5"
        jqyoui-droppable="{index: {{$index}}}" 
        jqyoui-draggable="{index: {{$index}}, insertInline: true, direction:'jqyouiDirection'}"
        data-jqyoui-options="{revert: 'invalid',helper: 'clone',zIndex: 350}"
        data-direction="{{item.jqyouiDirection}}">              
     <td>{{item.title}}</td>
     <td>{{item.category}}</td>
</tr>

你也可以看到我的 plunker 代码 - https://plnkr.co/edit/rLEGOa4msgrjKMiCyVC1?p=info

【讨论】：

【解决方案2】：

我最终找到了我的问题的解决方案，它是这样的：

<tr ng-repeat="item in list5" data-jqyoui-options="{revert: 'invalid', helper: 'clone',cursor: 'move'}" data-drag='true' ng-model="list5" jqyoui-draggable="{index: {{$index}},placeholder:true,animate:true}" ng-hide="!item">
                <div ng-show='!list5.length' class='label-warning'>No content. Please add the items</div>
                <td>{{item.title}}</td>
                <td>{{item.category}}</td>
            </tr>

【讨论】：