How do you cancel drag with Escape key

Question

Please, do you have any idea how to cancel the drag&drop with the Escape button and return dragged item to its original position?

I am using https://github.com/RubaXa/Sortable, the code is:

Sortable.create(shelf2, {
  animation: 200,
  group: {
    name: "shared",
    revertClone: true
  },
  sort: true,
  // Set the delay for the Drag&Drop effect
  delay: 1000,
  ghostClass: "sortable-ghost",
    chosenClass: "sortable-chosen"
});

And here is the full example on Codepen: https://codepen.io/vlastapolach/pen/xreXpv

Any ideas please?

Answer 1

Problem solved by switching to different library - jQueryUI and calling their native Cancel method:

  $(document).keyup(function(e) {
    if (e.which === 27 || e.keyCode === 27) {
      $("#shelf1, #shelf2").sortable("cancel");
    }
  });
});