为什么 sortable() 在从另一个列表拖放后在动态列表中不起作用？

问题描述

我的可排序购物车有问题。 主要思想来自jQuery documentation，但我还需要在动态拖放后使购物车可排序。我不明白为什么 sortable('refresh') 不起作用。我为此尝试了 100 多个想法，但结果都是一样的。代码不清楚，抱歉。

// 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'
  },ui) {
    removeItem(ui.draggable);
    updateOrder();
  }
});
// $cartUl.droppable({ accept: '#cartUl li' });

// moving images to the cart
let remove_icon = "<a href='#' class='ui-icon ui-icon-refresh'>Remove</a>";
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 = "<a href='#' class='ui-icon ui-icon-cart'>Add item</a>";
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','180px')
          .end()
          .appendTo($gallery2)
          .fadeIn();
      });
      break;
    case '3':
      $item.fadeOut(function () {
        $item
          .find('a.ui-icon-refresh')
          .remove()
          .end()
          .css('width','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%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div class="ui-widget-wrap ui-helper-clearfix">
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">TAB1 TITLE</a></li>
      <li><a href="#tabs-2">TAB2 TITLE</a></li>
      <li><a href="#tabs-3">TAB3 TITLE</a></li>
    </ul>
    <div id="tabs-1">
      <ul class="gallery" id="gallery1">
        <li
          class="ui-widget-content ui-corner-tr"
          data-parent="1"
          id="tab1-1"
        >
          <h5 class="ui-widget-header">item 1-1</h5>
          <img
            src="https://blog.amplexor.com/hubfs/DXM_Blog_Images/digital-platform-testing-many-links.jpg"
            alt="The peaks of High Tatras"
            width="96"
            height="72"
          />
          <a
            href="link/to/cart/script/when/we/have/js/off"
            title="Delete this image"
            class="ui-icon ui-icon-cart"
            >Add item</a
          >
        </li>
        <li
          class="ui-widget-content ui-corner-tr"
          data-parent="1"
          id="tab1-2"
        >
          <h5 class="ui-widget-header">item 1-2</h5>
          <img
            src="https://blog.amplexor.com/hubfs/DXM_Blog_Images/digital-platform-testing-many-links.jpg"
            alt="The chalet at the Green mountain lake"
            width="96"
            height="72"
          />
          <a
            href="link/to/cart/script/when/we/have/js/off"
            title="Delete this image"
            class="ui-icon ui-icon-cart"
            >Add item</a
          >
        </li>
        <li
          class="ui-widget-content ui-corner-tr"
          data-parent="1"
          id="tab1-3"
        >
          <h5 class="ui-widget-header">item 1-3</h5>
          <img
            src="https://blog.amplexor.com/hubfs/DXM_Blog_Images/digital-platform-testing-many-links.jpg"
            alt="Planning the ascent"
            width="96"
            height="72"
          />
          <a
            href="link/to/cart/script/when/we/have/js/off"
            title="Delete this image"
            class="ui-icon ui-icon-cart"
            >Add item</a
          >
        </li>
        <li
          class="ui-widget-content ui-corner-tr"
          data-parent="1"
          id="tab1-4"
        >
          <h5 class="ui-widget-header">iten 1-4</h5>
          <img
            src="https://blog.amplexor.com/hubfs/DXM_Blog_Images/digital-platform-testing-many-links.jpg"
            alt="On top of Kozi kopka"
            width="96"
            height="72"
          />
          <a
            href="link/to/cart/script/when/we/have/js/off"
            title="Delete this image"
            class="ui-icon ui-icon-cart"
            >Add item</a
          >
        </li>
      </ul>
    </div>
    <div id="tabs-2">
      <ul class="gallery" id="gallery2">
        <li class="ui-widget-content ui-corner-tr" data-parent="2">
          <h5 class="ui-widget-header">item 2-1</h5>
          <img
            src="https://ps.w.org/pretty-link/assets/icon-256x256.png?rev=2503434"
            alt="The peaks of High Tatras"
            width="96"
            height="72"
          />
          <a
            href="link/to/cart/script/when/we/have/js/off"
            title="Delete this image"
            class="ui-icon ui-icon-cart"
            >Add item</a
          >
        </li>
        <li class="ui-widget-content ui-corner-tr" data-parent="2">
          <h5 class="ui-widget-header">item 2-2</h5>
          <img
            src="https://ps.w.org/pretty-link/assets/icon-256x256.png?rev=2503434"
            alt="The chalet at the Green mountain lake"
            width="96"
            height="72"
          />
          <a
            href="link/to/cart/script/when/we/have/js/off"
            title="Delete this image"
            class="ui-icon ui-icon-cart"
            >Add item</a
          >
        </li>
        <li class="ui-widget-content ui-corner-tr" data-parent="2">
          <h5 class="ui-widget-header">item 2-3</h5>
          <img
            src="https://ps.w.org/pretty-link/assets/icon-256x256.png?rev=2503434"
            alt="Planning the ascent"
            width="96"
            height="72"
          />
          <a
            href="link/to/cart/script/when/we/have/js/off"
            title="Delete this image"
            class="ui-icon ui-icon-cart"
            >Add item</a
          >
        </li>
        <li class="ui-widget-content ui-corner-tr" data-parent="2">
          <h5 class="ui-widget-header">item 2-4</h5>
          <img
            src="https://ps.w.org/pretty-link/assets/icon-256x256.png?rev=2503434"
            alt="On top of Kozi kopka"
            width="96"
            height="72"
          />

          <a
            href="link/to/cart/script/when/we/have/js/off"
            title="Delete this image"
            class="ui-icon ui-icon-cart"
            >Add item</a
          >
        </li>
      </ul>
    </div>
    <div id="tabs-3">
      <ul class="gallery" id="gallery3">
        <li class="ui-widget-content ui-corner-tr" data-parent="3">
          <h5 class="ui-widget-header">item 3-1</h5>
          <img
            src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
            alt="The peaks of High Tatras"
            width="96"
            height="72"
          />

          <a
            href="link/to/cart/script/when/we/have/js/off"
            title="Delete this image"
            class="ui-icon ui-icon-cart"
            >Add item</a
          >
        </li>
        <li class="ui-widget-content ui-corner-tr" data-parent="3">
          <h5 class="ui-widget-header">Hitem 3-2</h5>
          <img
            src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
            alt="The chalet at the Green mountain lake"
            width="96"
            height="72"
          />

          <a
            href="link/to/cart/script/when/we/have/js/off"
            title="Delete this image"
            class="ui-icon ui-icon-cart"
            >Add item</a
          >
        </li>
        <li class="ui-widget-content ui-corner-tr" data-parent="3">
          <h5 class="ui-widget-header">item 3-3</h5>
          <img
            src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
            alt="Planning the ascent"
            width="96"
            height="72"
          />

          <a
            href="link/to/cart/script/when/we/have/js/off"
            title="Delete this image"
            class="ui-icon ui-icon-cart"
            >Add item</a
          >
        </li>
        <li class="ui-widget-content ui-corner-tr" data-parent="3">
          <h5 class="ui-widget-header">item 3-4</h5>
          <img
            src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
            alt="On top of Kozi kopka"
            width="96"
            height="72"
          />
          <a
            href="link/to/cart/script/when/we/have/js/off"
            title="Delete this image"
            class="ui-icon ui-icon-cart"
            >Add item</a
          >
        </li>
      </ul>
    </div>
  </div>

  <div id="cart" class="cart">
    <h4 class="ui-widget-header">Cart</h4>
    <ul id="cartUl">
      <li>11</li>
      <li>21</li>
    </ul>
  </div>
</div>

<hr />
<h5>Order:</h5>
<ul class="order"></ul>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）