限制HTML5中的可拖放行

Question

我正在尝试使用html5在同一个表中实现拖放行，但我想将放置区域限制为几行而不是整个表。

代码：

<table id="visibletable" class="dra-table">
                    <thead>
                        <tr>
                            <th>Visible</th>
                            <th>Width</th>
                            <th>Color</th>
                        </tr>
                    </thead>
                    <tbody ondrop="dropPart(event)" ondragover="allowDropPart(event)">
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                        </tr>
                        <tr id="partdesc1"  draggable="true" ondragstart="dragPart(event)">
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                        </tr>
                        <tr id="partdesc2"  draggable="true" ondragstart="dragPart(event)">
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                        </tr>
                        <tr id="partdesc3"  draggable="true" ondragstart="dragPart(event)">
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                        </tr>
                        <tr id="partdesc4"  draggable="true" ondragstart="dragPart(event)">
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                        </tr>
                        <tr id="partdesc5"  draggable="true" ondragstart="dragPart(event)">
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                        </tr>
                    </tbody>
                </table>

不允许拖动表格中的前3行，不允许拖拽行在前3行中删除。

目前我已在tbody标签上应用了ondrop="dropPart(event)"，因此我可以删除表格中的任何位置，是否有办法限制丢弃区域？

Answer 1

您可以参考本地HTML5拖放链接

http://puu.sh/hTQaP/af2473710b.png

http://www.redips.net/javascript/drag-and-drop-table-row/