CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortable
Frank
Frank

Reputation: 323

jquery sortable with item restriction

I want to avoid item 7 to get dragged in the red list. 

$("span").sortable({
  connectWith: ".con"
}).disableSelection();
#red {
  margin-top: 10px;
  border: 1px solid red;
  display: block;
}

#green {
  margin-top: 10px;
  border: 1px solid green;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.9/jquery-ui.min.js"></script>

<form id="form">
  <span id="red" class="con">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
        <div>Item 5</div>
    </span>
  <span id="green" class="con">
        <div>Item 6</div>
        <div>Item 7</div>
    </span>
</form>

I think I have to use the stop event and check if the item 7 is in the red list and if yes return the item to the original position.

Upvotes: 1

Views: 123

Answers (1)

PierreN
PierreN

Reputation: 988

You can use the "cancel/stop" capability using sortable('stop') :

$("span").sortable({
  remove: function(e, ui) {
    if(ui.item.hasClass("id_7")) {
        alert('id 7');
        e.preventDefault();
    }
  },
  connectWith: ".con"
});

Upvotes: 2

Related Questions