AngularJS uiSortable - 使用项目和鼠标突出显示表格单元格答案

【问题标题】：AngularJS uiSortable - highlighting table cell moving over with item and mouseAngularJS uiSortable - 使用项目和鼠标突出显示表格单元格
【发布时间】：2017-10-07 21:19:04
【问题描述】：

我在我的应用程序中使用了 uiSortable (uiSortable)，它运行良好。我唯一不能做的就是在将项目放入单元格之前突出显示放置单元格。这是我的 html- 代码：

<td ui-sortable="vm.moveableItems" data-ng-model="myModelItems">
    ....

这是我的 javascript 代码：

vm.moveableItems= {
        start: function(e, ui) {
        },
        update: function(e, ui) { 
        },
        stop: function(e, ui) {
             // code to place the item into the cell -> works fine

是否有可能突出显示我用项目和鼠标移动过的单元格？

【问题讨论】：

你能发个小提琴吗？

标签： angularjs jquery-ui-sortable

【解决方案1】：

uiSortable 默认情况下已经将ui-sortable-placeholder 类应用于您当前悬停的元素。

默认情况下，它是不可见的，但您可以仅使用 css 轻松更改它：

.ui-sortable-placeholder {
  visibility: visible !important;
  background: red;
}

如果您想要样式化的元素是 td，则只需更改 .ui-sortable-placeholder td 的 background，但保留占位符类上的 visibility 覆盖。

【讨论】：

【解决方案2】：

您正在寻找placeholder: <classname>。这将在您的 ui-sortable=<parms> 以及您已经在使用的 start、update 和 stop 方法中设置。

演示http://plnkr.co/edit/s3LNeq4SzrBxj4bhFu4q?p=preview

控制器

app.controller('mainController', function ($scope) {

    $scope.list = ['Alabama','Alaska','Arizona','Arkansas'];

    $scope.sortableOptions = {
        placeholder: 'ui-state-highlight'
        start: function(e, ui) {},
        update: function(e, ui) {},
        stop: function(e, ui) {},
    };

});

标记

<div ng-controller="mainController">
  <table class="table">
    <tbody ui-sortable="sortableOptions" ng-model="list">
      <tr ng-repeat="item in list" style="cursor: move;">
        <td>
          {{item}}
        </td>
      </tr>
    </tbody>
  </table>
</div>

CSS

.ui-state-highlight {
    height: 50px;
    background: green;
    display: block;
}

更新：水平

这也可能与水平移动有关。通过 'ui-floating': true，并调整你的 CSS 以支持它。此处植入的 Plnkr：http://plnkr.co/edit/YwBpL0LmSvVaa4t2HNsO?p=preview

【讨论】：

是否也可以横向进行，例如tr 中有两个 td？