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

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

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

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

如果要样式化的元素是td，只需更改 .ui-sortable-placeholder td 的background，但保留占位符类的visibility重写。

Answer 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