javascript - "only one TABLE column"负责拖放怎么办？ (触摸打洞)

Question

在具有拖放选项的表格中。

如何让只有一列负责拖放？

因为目前所有列都具有拖放功能，所以我希望只有一个列具有此属性。

JavaScript 和 JQUERY

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>


<script>

    $(document).ready(function () {

        $("#sortable").sortable();
        $("#sortable").disableSelection();

    });

</script>

HTML - 表格拖放(触摸打洞)

<table class="table table-hover table-striped">
            <thead>
                <tr>
                    <th>
                        Drag Button
                    </th>
                    <th>
                        Number
                    </th>
                    <th>
                        Description
                    </th>
                </tr>
            </thead>

            <tbody id="sortable">
                <tr>
                    <td class="ui-state-default drag-handler" data-taskid="1"></td>
                    <td>1</td>
                    <td>Description item 1</td>
                </tr>
                <tr>
                    <td class="ui-state-default drag-handler" data-taskid="2"></td>
                    <td>2</td>
                    <td>Description item 2</td>
                </tr>
                <tr>
                    <td class="ui-state-default drag-handler" data-taskid="3"></td>
                    <td>3</td>
                    <td>Description item 3</td>
                </tr>
            </tbody>
        </table>

CSS

<style class="cp-pen-styles">
            body {
                font-size: 14px;
            }
            .drag-handler {
                width: 8em;
                position: relative;
                background-color: #E4E6EB;
                background-image: linear-gradient(45deg, #E4E6EB, #E4E6EB 2px, #fff 2px, #fff 4px, #E4E6EB 4px, #E4E6EB 9px, #fff 9px, #fff 11px, #E4E6EB 11px, #E4E6EB 16px, #fff 16px, #fff 18px, #E4E6EB 18px, #E4E6EB 22px);
                background-size: 10px 20px; 
                cursor: move;
                border-top: 2px solid #FFF;
                border-bottom: 2px solid #FFF;
            }

            .drag-handler:active {
                background-image: linear-gradient(45deg, #bab86c, #bab86c 2px, #fff 2px, #fff 4px, #bab86c 4px, #bab86c 9px, #fff 9px, #fff 11px, #bab86c 11px, #bab86c 16px, #fff 16px, #fff 18px, #bab86c 18px, #bab86c 22px);
                background-size: 10px 20px; 
            }
</style>

Answer 1

您使用句柄选项。它记录在@http://api.jqueryui.com/sortable/#option-handle

$(document).ready(function() {

  $("#sortable").sortable({
    handle: ".drag-handler"
  });
  $("#sortable").disableSelection();

});

demo