Question

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

<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"
      });
    }
  });
});

由于每个人都有一个label类，我会将其用作单个选择器。当draggable与droppable一起使用时，您可以将删除的项目附加到元素。 Draggable只是调整它的位置，但不会改变它在DOM中的位置。

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

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

1 个答案: