Why does sortable() doens't work in dynamic list after drag and drop from another list?

Question

I have a problem with my sortable cart. The main idea is from jQuery documentation, But I also need to make the cart sortable after dynamic drag and drop. I can't understand why sortable('refresh') doesn't work. I tried more than 100 ideas for that, but the result is the same. The code isn't clear, sorry for that.

// There's the gallery and the cart
let $galleries = $('.gallery'),
  $gallery1 = $('#gallery1'),
  $gallery2 = $('#gallery2'),
  $gallery3 = $('#gallery3'),
  $cart = $('#cart'),
  $ul = $('.order'),
  $cartUl = $('#cartUl');

// Let the gallery items be draggable
$('li', $galleries).draggable({
  cancel: 'a.ui-icon', // clicking an icon won't initiate dragging
  revert: 'invalid', // when not dropped, the item will revert back to its initial position
  containment: 'document',
  helper: 'clone',
  cursor: 'move'
});

// Let the cart be droppable, accepting the gallery items
$cart.droppable({
  accept: '.gallery > li',
  classes: {
    'ui-droppable-active': 'ui-state-highlight'
  },
  drop: function (event, ui) {
    addItem(ui.draggable);
  }
});

// Let the galleries be droppable, accepting items from the cart
$galleries.droppable({
  accept: '#cart li',
  classes: {
    'ui-droppable-active': 'custom-state-active'
  },
  drop: function (event, ui) {
    removeItem(ui.draggable);
    updateOrder();
  }
});
// $cartUl.droppable({ accept: '#cartUl li' });

// moving images to the cart
let remove_icon = "Remove";
function addItem($item) {
  $cartUl.sortable();

  $item.fadeOut(function () {
    $item.find('a.ui-icon-cart').remove();
    $item
      .append(remove_icon)
      .appendTo($cartUl)
      .fadeIn(function () {
        $item.find('img');
      });
    $cartUl.sortable('refresh');
    $cartUl.droppable({ accept: '#cartUl li' });

    if ($cartUl.sortable('refresh')) {
      console.log($cartUl.sortable('refresh'));
    }
    showOrder();
    // $item.find('.ui-icon.ui-icon-refresh').next().remove();
  });
}

// Item remomove
let cart_icon = "Add item";
function removeItem($item) {
  switch ($item.attr('data-parent')) {
    case '1':
      $item.fadeOut(function () {
        $item
          .find('a.ui-icon-refresh')
          .remove()
          .end()
          .css('width', '200px')
          .append(cart_icon)
          .find('img')
          .css('height', '180px')
          .end()
          .appendTo($gallery1)
          .fadeIn();
      });
      // updateOrder($item);
      break;
    case '2':
      $item.fadeOut(function () {
        $item
          .find('a.ui-icon-refresh')
          .remove()
          .end()
          .css('width', '200px')
          .append(cart_icon)
          .find('img')
          .css('height', '180px')
          .end()
          .appendTo($gallery2)
          .fadeIn();
      });
      break;
    case '3':
      $item.fadeOut(function () {
        $item
          .find('a.ui-icon-refresh')
          .remove()
          .end()
          .css('width', '200px')
          .append(cart_icon)
          .find('img')
          .css('height', '180px')
          .end()
          .appendTo($gallery3)
          .fadeIn();
      });
      break;
  }
}

function showOrder() {
  //order list
  let $li = document.createElement('li');
  $('#cartUl li h5').each(function () {
    $li.textContent = $(this).text();
    $li.setAttribute('data-id', $(this).parent()[0].id);
  });
  $li = $ul.append($li);
}

function updateOrder($item) {
  ///////once!!!!!
  if ($item.attr('id') === $('.order li').attr('data-id')) {
    console.log($item.attr('id'));
  }
}
// behavior with events
$('ul.gallery > li').on('click', function (event) {
  let $item = $(this),
    $target = $(event.target);

  if ($target.is('a.ui-icon-cart')) {
    addItem($item);
  } else if ($target.is('a.ui-icon-refresh')) {
    removeItem($item);
    updateOrder($item);
  }
  return false;
});

//tabs
$(function () {
  $('#tabs').tabs();
});

.gallery {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.gallery.custom-state-active {
  background: #eee;
}
.gallery li {
  /* float: left; */
  width: 200px;
  padding: 0.4em;
  margin: 0 0.4em 0.4em 0;
  text-align: center;
}
.gallery li h5 {
  margin: 0 0 0.4em;
  cursor: move;
}
.gallery li a {
  float: right;
  font-size: 14px;
  color: darkgreen;
}

.gallery li > .ui-icon.ui-icon-refresh {
  color: darkred;
  font-size: 12px;
}
.gallery li img {
  width: 100%;
  height: auto;
  cursor: move;
  object-fit: cover;
}

#cart {
  float: right;
  width: 50%;
  min-height: 18em;
  padding: 1%;
  list-style-type: none;
}
#cart h4 {
  line-height: 16px;
  margin: 0 0 0.4em;
}
#cart h4 .ui-icon {
  float: left;
}
#cart .gallery h5 {
  /* display: none; */
}

.ui-widget-wrap {
  display: flex;
  justify-content: center;
}
.cart {
  border: 1px solid green;
}

.ui-tabs-nav {
  display: flex;
  list-style-type: none;
}

.ui-tabs-anchor {
  padding: 15px 20px;
  text-align: center;
  color: darkcyan;
}

#tabs {
  width: 50%;
}

Why does sortable() doens't work in dynamic list after drag and drop from another list?

Answers (0)

Related Questions

Why does sortable() doens&#39;t work in dynamic list after drag and drop from another list?

Answers (0)

Related Questions

Why does sortable() doens't work in dynamic list after drag and drop from another list?