限制HTML5中的拖放行



我正在尝试使用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)",因此我能够在表中的任何地方放下行,有没有办法限制下降区域?

您可以在下面的链接下对本机HTML5拖放

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

http://www.html5rocks.com/en/tutorials/dnd/basics/

最新更新