Question

我正在尝试在 TypeScript （版本3.2.1）开发中使用 JQueryUI Sortable （版本1.12.1）方法。通常，这是相对简单的体验，但是在尝试实现 Sortable Widget的 helper选项时遇到了一个问题。在 TypeScript 中，我的代码如下：

$('.connected-sortable').sortable({
    connectWith: '.connected-sortable',
    delay: 150,
    helper: (evt: Event, item: JQueryUI.Sortable) => {
        // How can I work with the JQueryUI.Sortable object?
        // I really want a JQuery<HTMLElement> or even a 
        // plain Element as I want to do manipulate it.

        // The following fails:
        // Property 'hasClass' does not exist on type 'Sortable'
        item.addClass('selected');
    }
});

我希望能够像使用JQueryUI.Sortable甚至使用普通JQuery<HTMLElment>一样访问Element对象，但是我找不到转换/访问基础项目的方法。作为参考，我的代码基于此Fiddle运行在普通的JavaScript中。

有人能指出我正确的方向吗？谢谢。

Answer 1

您使用ui.item定位可排序对象。

在可排序的start函数上，您可以添加class，在停止removeClass上；

$('.connected-sortable').sortable({
  connectWith: '.connected-sortable',
  delay: 150,
  helper: (evt: Event, item: JQueryUI.Sortable),
  start: function(event,ui) {
    ui.item.addClass('selected');
  },
  stop: function(event,ui) {
    ui.item.removeClass('selected');
  }
});

在TypeScript中管理可排序的JQueryUI

1 个答案: