0

I am using sortable() in a game in which the student has to sort items. When an item is in its correct position, I want them to be disabled. So far I have been able to give the items a border color but I am not able to disable them so the student cannot drag them again. see here. then when all the items are in the correct position, a feedback alerts the user.

Twisty
  • 30,304
  • 2
  • 26
  • 45
Edgedudette
  • 61
  • 1
  • 9
  • I guess my first question is how do you know what the proper order should be? Is there an array or object containing the proper order? – Twisty Nov 28 '17 at 01:45

1 Answers1

0

This is similar: jquery ui sortable disable for one li item

Attempted Example: https://jsfiddle.net/Twisty/dujfwLfz/

HTML

<ul id="sortable">
  <li id="log-1" class="sort"><img src="https://dummyimage.com/190x30/914848/ffffff&text=If+It" class="default" /></li>
  <li id="log-2" class="sort"><img src="https://dummyimage.com/190x30/914848/ffffff&text=Too+Heavy!" class="default" /></li>
  <li id="log-3" class="sort"><img src="https://dummyimage.com/190x30/914848/ffffff&text=Than+pedal+of+flower+resting" class="default" /></li>
  <li id="log-4" class="sort"><img src="https://dummyimage.com/190x30/914848/ffffff&text=On+grass,+oh+still+too+heavy+it+were," class="default" /></li>
  <li id="log-5" class="sort"><img src="https://dummyimage.com/190x30/914848/ffffff&text=were+lighter+touch" class="default" /></li>
</ul>

JavaScript

$(function() {
  var final = [
    1,
    5,
    3,
    4,
    2
  ];

  $("#sortable").sortable({
      items: "li:not(.done)",
      update: function(e, ui) {
        var currentOrder = [];
        $(this).find("li").each(function(ind, elem) {
          var itemId = $(elem).attr("id");
          currentOrder.push({
            id: itemId,
            ordNum: itemId.slice(-1)
          });
        });
        console.log(currentOrder);
        $.each(final, function(k, i) {
          if (currentOrder[k].ordNum == i) {
            // Match
            $("#" + currentOrder[k].id).removeClass("sort").addClass("done");
          }
        });
        $(this).sortable("refresh");
      }
    })
    .disableSelection();
});

Changing the class allows us to no longer sort the items.

Twisty
  • 30,304
  • 2
  • 26
  • 45
  • I am revisiting this problem. Basically what I want to do is disable one item at a time when they are dropped in the correct position (something like in regular draggable() when the item is dropped in the correct droppable() so that it cannot be moved again and cannot be moved if you drop another item over it. I do not think your code accomplished this. I can disable the item but I cannot prevent it from being moved by another item. What I would like basically is make the item like an unsortable when it is in the correct position. – Edgedudette Apr 06 '18 at 14:42
  • @Edgedudette the use of `items: "li:not(.done)"` should help do that. When a item is dragged to the correct position, `done` class should be added and sortable should get refeshed. This would prevent the item from being included in the sortable items any longer. – Twisty Apr 06 '18 at 15:18
  • here is link. I still can't get this to work as you can see. The first one works but then the others do not [link](http://www.mjpagedesign.com/test/) – Edgedudette Apr 09 '18 at 15:20
  • @Edgedudette I could not see the code, but did see the issue. I went back to my fiddle and look at that too and can replicate the problem there. Will investigate. – Twisty Apr 09 '18 at 17:05