Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

155
Views
Cancel dragging of a sortable item

An absolutely common sortable case:

<script>
$(function() {
  $("#sortable").sortable();
});
</script>

<ul id="sortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Problem. Need to cancel dragging of an item on some condition and there is a good advice of Andrew Whitaker, but that approach is working only for jquery-ui-draggable and fails for sortables:

$("#sortable").sortable({
  start: function() {
    return false; // will still cause `this.helper is null`
  }
});

Will be greateful for suggestions.

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

Sortable has a "cancel" capability invoked using sortable('cancel').

From the docs: "Cancels a change in the current sortable and reverts it to the state prior to when the current sort was started." See http://api.jqueryui.com/sortable/#method-cancel.

Example usage:

$("#sortable").sortable({
  stop: function(e, ui) {
    if ("I need to cancel this") {
      $(ui.sender).sortable('cancel');
    }
  }
});
over 4 years ago · Santiago Trujillo Report

0

Returning false as fudgey suggests works great for making things dynamically unsortable, but there's also a cancel option in the sortable config which lets you set up static unsortables as well:

$("#sortable").sortable({
    // this prevents all buttons, form fields, and elemens
    // with the "unsortable" class from being dragged
    cancel: ":input, button, .unsortable"
});
over 4 years ago · Santiago Trujillo Report

0

The sort function callback does the same for sort as drag for draggable (demo):

$("#sortable").sortable({
    sort: function() {
        if ($(this).hasClass("cancel")) {
            $(this).sortable("cancel");
        }
    }
});
over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!