Check If HTML Element Has A Value or Specific Class Name and Revert

Question

I've created the following drag and drop feature using jQuery ui and it works as expected. But I've things that I am willing to accomplish:

In the first part, I would like to block the sorting or drag and drop feature between the boxes. Right now, anyone can put any no. of items in the boxes of first part (Specifically for the boxes of first part and between them) and a box can include all the items. One box will contain only one item at a time. But in this case, items from one box of first part can only be dragged to the boxes of second part.
In the same way, if an item of first part is dragged to the boxes of the second part and the box of second part already contains an item, then it should revert or will go back to the previous box of the first part.

I can do the check if any element is available in the boxes, but I am not sure how I can revert the boxes if the boxes aren't blank or similar? Anyone has done it before or any idea to implement it.

Here's a thread that I posted earlier and one of the user gave a perfect solution but still it has few issues and seems bit complex - Previous Thread. In this thread, the elements of boxes get overlapped in some cases.

N.B: Created two div sections with first and second, so you can have an idea how I am doing the task and for easy understanding.

$(function () {
 $("#sortable1, #sortable2").sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();
});

#sortable1, #sortable2 {
    border: 1px solid #eee;
    width: 142px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
}

 #sortable1 li, #sortable2 li {
    margin: 0 15px 15px 15px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}

#sortable1 ul li {
    display: block;
    text-align: center;
    float: left;
}

#sortable2 ul li {
    display: block;
    text-align: center;
    float: left;
}

Update 1: I did a minor change in the script section and it seems working except one. This condition checks if there's any li tag in the ul. If found, it immediately reverts. But the issue is, if it finds li tag in any of the boxes, then it disables all other item's draggable feature. Is it possible to maintain that functionality separately without creating dynamic classes or similar?

$(function () {
$("#sortable1, #sortable2").sortable({
        connectWith: ".connectedSortable",
        /* added */
        stop: function (event, ui) {
            if ($('ul#sortable2 li').length > 1) { //Condition changed here
                $(this).sortable("cancel");
            }
        },

    }).disableSelection();
});

user_927172 · Answer

You can define a function that is called when the stop event is fired by using the stop property. Then, when a sort stops, you can perform your check and use the cancel option in sortable to cancel the sort.

Below is an example using your code. See the /* added */ section.

Also, id values should be unique in an HTML document. I changed sortable1 and sortable2 to be classes in your markup.

$(function() {
  // sortable1 and sortable2 are now classes
  $(".sortable1, .sortable2").sortable({
    connectWith: ".connectedSortable",
    /* added */
    stop: function(event, ui) {
      if (ui.item.prev().closest('ul li').html()) { // replace with any other desired condition(s)
        $(this).sortable("cancel");
      }
    },

  }).disableSelection();
});

.sortable1,
.sortable2 {
  border: 1px solid #eee;
  width: 142px;
  min-height: 20px;
  list-style-type: none;
  margin: 0;
  padding: 5px 0 0 0;
  float: left;
  margin-right: 10px;
}

.sortable1 li,
.sortable2 li {
  margin: 0 15px 15px 15px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}

.sortable1 ul li {
  display: block;
  text-align: center;
  float: left;
}

.sortable2 ul li {
  display: block;
  text-align: center;
  float: left;
}

Check If HTML Element Has A Value or Specific Class Name and Revert

1 Answers