在TypeScript中管理JQueryUI Sortable

Question

我正在尝试在TypeScript(版本号3.2.1)开发中使用 JQueryUI Sortable(版本号1.12.1)方法。通常来说，这是一个相对简单的经历，但我在尝试实现Sortable Widget's的 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');
    }
});

我希望能够像使用JQuery<HTMLElment>或普通的Element一样访问JQueryUI.Sortable对象，但我找不到一种将基础项转换/访问的方法。 参考我的代码在纯旧JavaScript中运行，因为它基于此示例。

有没有人可以指点我正确的方向？谢谢。

- Neilski

Answer 1

你可以使用 ui.item 来定位可排序的对象。

在可排序的 start 函数中，你可以添加 class，在停止时移除 class。

$('.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');
  }
});

- Souleste