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

Question

我在我的应用程序中使用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

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

Answer 1

您正在寻找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

Answer 2

默认情况下，

uiSortable 已将ui-sortable-placeholder类应用于您当前悬停的元素。

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

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

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