在 TypeScript 中管理可排序的 JQueryUI

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

我希望能够像使用 JQuery<HTMLElment> 甚至普通的 Element 一样访问 JQueryUI.Sortable 对象，但我找不到 convert/access 底层的方法物品。作为参考，我的代码运行s 在普通的旧 JavaScript 中，因为它基于此 Fiddle.

谁能指出我正确的方向？谢谢。

Answer 1

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

在可排序的 start 函数上，您可以添加类，并在停止时删除类；

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

Managing JQueryUI Sortable in TypeScript

jquery

typescript

jquery-ui

jquery-ui-sortable