在 TypeScript 中管理可排序的 JQueryUI答案

【问题标题】：Managing JQueryUI Sortable in TypeScript在 TypeScript 中管理可排序的 JQueryUI
【发布时间】：2019-09-08 12:28:16
【问题描述】：

我正在尝试在 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 中运行，因为它基于 Fiddle。

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

【问题讨论】：

标签： jquery typescript jquery-ui jquery-ui-sortable

【解决方案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');
  }
});

【讨论】：