如何使用 jquery ui 在 table body td 中执行 draggable 和 sortable

Question

Draggable 正在运行，我希望可排序过程也适用于这些列。这些是我想要 sortable 使用 jQuery UI 的简单 div 元素。如果下面的代码有任何问题，请告诉我。

<table class="table table-bordered table-condensed">
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>File A</td>
            <td><span id="draggable" class="label label-default ui-widget-content filediv"> </span></td>
            <td></td>
            <td><span id="draggable1" class="label label-default ui-widget-content filediv"> </span></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>File B</td>
            <td></td>
            <td><span id="draggable2" class="label label-success ui-widget-content filediv"> </span></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
<script>
   $( function() {
   $( "#draggable" ).draggable();
   $( "#draggable1" ).draggable();
   $( "#draggable2" ).draggable();
  } );
</script>

Answer 1

我做了一些猜测，但我认为你想要拖放，而不是排序。

示例：https://jsfiddle.net/g21dso7e/2/

CSS

.table-bordered {
  border: 1px solid #000;
}

.table-condensed {
  border-collapse: collapse;
}

.table tr {
  padding: 0.2em;
  border: 1px solid #000;
}

.table tr td {
  border-left: 1px solid #000;
  min-width: 1.5em;
  min-height: 1.5em;
  position: relative;
}

.table tr td span.label {
  position: absolute;
  top: 0.4em;
  left: 0.2em;
}

JavaScript

$(function() {
  $(".label").draggable();
  $(".table tbody tr td").droppable({
    accept: ".label",
    drop: function(e, ui) {
      ui.draggable.appendTo($(this)).css({
        top: "0.4em",
        left: "0.2em"
      });
    }
  });
});

因为每个选择器都有 class 个 label，我会将其用作单个选择器。当 draggable 与 droppable 结合使用时，您可以将拖放的项目附加到元素。 Draggable 只是调整它的位置，但不会改变它在 DOM.

中的位置

当项目被放置在 table 单元格上时，drop 回调会为我们完成工作。 CSS 有助于将项目放入单元格中的正确位置。

如何使用 jquery ui 在 table body td 中执行 draggable 和 sortable

How to do draggable and sortable in table body td using jquery ui

html

javascript

jquery-ui

draggable

jquery-ui-sortable