系统学习magento二次开发，推荐小册：《Magento中文全栈二次开发 》

DynamicRowsDragAndDrop是Magento 2中的一个组件，它可以让你轻松地为DynamicRowsRecord组件添加拖放功能。使用DynamicRowsDragAndDrop，用户可以通过拖动记录行来重新排序记录行。

下面是一个简单的DynamicRowsDragAndDrop代码示例：

首先，在Magento 2中创建一个模块。然后，在模块的layout文件中添加以下代码：

<referenceContainer name="content">
    <block class="Magento\Framework\View\Element\Template" name="dynamicrowsdraganddrop" template="Vendor_Module::dynamicrowsdraganddrop.phtml" />
</referenceContainer>

接下来，在模块的phtml文件中添加以下代码：

<div id="dynamic-rows-drag-and-drop">
    <button class="action-add">
        <span>Add Row</span>
    </button>
    <table class="table dynamic-rows-drag-and-drop-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody data-bind="scope: 'dynamic-rows-drag-and-drop'">
            <tr class="record-row" data-bind="foreach: rows, draggable: true, droppable: true">
                <td><input type="text" data-bind="value: name"/></td>
                <td><input type="text" data-bind="value: email"/></td>
                <td><button class="action-delete" data-bind="click: $parent.deleteRow">Delete</button></td>
            </tr>
        </tbody>
    </table>
</div>
<script type="text/x-magento-init">
{
    "#dynamic-rows-drag-and-drop": {
        "Vendor_Module/dynamicrowsdraganddrop": {
            "rows": [{
                "name": "John Smith",
                "email": "john@example.com"
            }, {
                "name": "Jane Doe",
                "email": "jane@example.com"
            }]
        }
    }
}
</script>

最后，在模块的js文件中添加以下代码：

define([
    'jquery',
    'underscore',
    'ko',
    'uiComponent',
    'mage/translate',
    'mage/draggable',
    'mage/droppable'
], function ($, _, ko, Component, $t) {
    'use strict';
    return Component.extend({
        initialize: function () {
            this._super();
            this.rows = ko.observableArray([]);
        },
        addRow: function () {
            this.rows.push({
                name: '',
                email: ''
            });
        },
        deleteRow: function (row) {
            this.rows.remove(row);
        }
    });
});

这个示例中，我们在js文件中引入了两个Magento自带的库mage/draggable和mage/droppable，用于实现拖放功能。在phtml文件中，我们使用了data-bind指令将draggable和droppable指令绑定到每个记录行上，以实现拖放功能。在js文件中，我们不需要编写任何拖放代码，因为Magento的draggable和droppable库会自动为我们处理拖放操作。