javascript - 拖放整个表格行

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

我正在使用这个插件: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>

最佳答案

我有一个使用 Angular 拖放插件进行表行排序(拖放)的解决方案。它一定适合你。

<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>

您还可以看到我的骗子代码 - https://plnkr.co/edit/rLEGOa4msgrjKMiCyVC1?p=info

关于javascript - 拖放整个表格行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30747853/

相关文章:

javascript - 将事件与对象一起克隆?

javascript - Bootstrap 下拉不选择元素。需要下拉按钮组设计

angularjs - 如何在angular服务中使用$ on?

angularjs - 如何在有 Angular 的 ui-grid 单元格中添加图像

JQuery UI 自动完成功能防止退格键搜索

javascript - typescript |关于缺少函数返回类型的警告,ESLint

javascript - 在不创建 html/javascript 测试文件的情况下在浏览器中测试 JavaScript 脚本

javascript - 如何在 Angular JS 中使用指令。在我的情况下不起作用,为什么?

jquery - 如何更改日期选择器颜色?

单击按钮时的 jquery 对话框