Managing JQueryUI Sortable in TypeScript

Question

I am trying to use the JQueryUI Sortable (version 1.12.1) method in a TypeScript (version 3.2.1) development. Generally, this has been a relatively straightforward experience, but I have run into a problem trying to implement the Sortable Widget's helper option. In TypeScript my code looks like this:

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

I want to be able to access the JQueryUI.Sortable object as with a JQuery<HTMLElment> or even a plain Element but I cannot find a way to convert/access the underlying item. For reference, my code runs in plain old JavaScript as it is based upon this Fiddle.

Can anyone point me in the right direction? Thanks.

Answer 1

You target the sortable object using ui.item.

On the sortable start function you could addClass, and on stop 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');
  }
});