jquery UI inventory items block after move slot

I have a problem When i move a item on another slot, the item will … Read more jquery UI inventory items block after move slot

I have a problem
When i move a item on another slot, the item will block, and can’t be moved.
Code:
……………………………………………………
…………………………
…………………………
…………………………
…………………………
…………………………
…………………………
…………………………
…………………………
…………………………
…………………………
…………………………
…………………………
…………………………
…………………………
…………………………
…………………………
…………………………
…………………………

    $(function() {
  function log(string) {
    console.log(Date.now(), string);
  }

  function makeGrid() {
    log("Make Grid...");
    for (var i = 0; i < 36; i++) {
      $("<div>", {
        class: "slot"
      }).data({
        count: 0,
        stackable: true
      }).appendTo(".slots");
    }
    log("-* Grid Complete *-");
  }

  function makeDraggable(target) {
    log("Make Drag, Current Class: " + $(target).attr("class"));
    console.log(target);
    $(target).draggable({
      scroll: false,
      helper: "clone",
      cursor: "pointer",
      zIndex: 27,
      revert: "invalid"
    });
    log("After Make Drag, Current Class: " + $(target).attr("class"));
    console.log(target);
  }

  function refreshSlot(target) {
    log("Refresh Slot");
    $(".size", target).html($(target).data("count"));
  }

  function addItem(slot, item) {
    log("Add Item " + item.id);
    $.extend(item, {
      stackable: (item.category != 0),
      count: (item.count == undefined ? 1 : item.count)
    });
    slot = $(slot);
    var newItem = $("<div>", {
        class: "item",
        id: item.id,
      })
      .data(item)
      .css("background-image", "url(" + item.img + ")");
    newItem.appendTo(slot);
    $("<div>", {
      class: "size"
    }).appendTo(slot);
    slot.data({
      count: item.count,
      stackable: item.stackable
    });
    log("Item Added - Refreshing");
    refreshSlot(slot);
  }

  function emptySlot(target) {
    log("Empty Slot " + $(target).index());
    $(target).data({
      count: 0,
      stackable: true
    }).empty();
  }

  function loadPlayerItems(items) {
    log("Loading Player Items...");
    $.each(items, function(index, item) {
      addItem($(".slots > .slot").eq(index), item);
    });
    log("-* Loading Complete *-");
  }

  function isAcceptable(item) {
    if ($(this).children().length == 0 || $(".item", this).data("stackable")) {
      return true;
    }
    return false;
  }

  var pItems = {
    playerItems: [{
        img: 'https://i.imgur.com/5cjSI9X.png',
        name: 'bat',
        id: 1,
        category: 0
      },
      {
        img: 'https://i.imgur.com/HLQORBk.png',
        name: 'axe',
        id: 2,
        category: 1
      },
      {
        img: 'https://i.imgur.com/HLQORBk.png',
        name: 'axe',
        id: 3,
        category: 1
      }
    ]
  };

  makeGrid();
  loadPlayerItems(pItems.playerItems);
  makeDraggable(".item");

  $(".slots > .slot").droppable({
    accept: isAcceptable,
    drop: function(event, ui) {
      var origin = ui.draggable.parent();
      var target = $(this);
      log("Drop Accepted; From: " + origin.index() + ", To: " + target.index());
      // Increase the Count
      target.data("count", target.data("count") + 1);
      // Check for Stack
      if (target.children().length == 0) {
        addItem(target, ui.draggable.data());
      } else {
        refreshSlot(target);
      }
      // Check Orginal Stack
      if (origin.data("count") > 1) {
        origin.data("count", origin.data("count") - 1);
        refreshSlot(origin);
      } else {
        emptySlot(origin);
      }
      makeDraggable($(".item", this));
    }
  });
});
body {
  display: flex;
  justify-content: space-between;
}

#inventory {
    width: 100vw;
    height: 56.25vw;
    background: rgba(0,0,0,.5);
}

.list-slots {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,.7);
    width: 41.667vw;
    height: 41.667vw;
    max-width: 80%;
}

.slots {
  max-width: 87%;
  margin: auto;
  padding-top: 3.125vw;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.slots .slot {
  width: 100px;
  height: calc(100px + 1em);
  background-color: #ccc;
  margin-bottom: 0.781vw;
}

.slots .slot .item {
  background-repeat: no-repeat;
  width: 100px;
  height: 100px;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="inventory">
  <div class="list-slots">
    <div class="slots"></div>
  </div>
</div>

Source: JavaSript – Stack Overflow


Categories: NewsTags:

Tags:


Leave a Reply

Your email address will not be published. Required fields are marked *