Jquery 快速构建可拖曳的购物车DragDrop

下面我将介绍如何使用JQuery 快速构建可拖曳的购物车DragDrop，包括下面的内容：

1. 安装和导入JQuery脚本文件
2. 构建基础的HTML结构
3. 实现拖拽操作以及购物车的添加和删除

步骤一：安装和导入JQuery脚本文件

首先，你需要下载JQuery脚本文件。你可以在官方网站下载JQuery的最新版本，也可以使用CDN服务，比如：

<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

将上述代码添加到你的html文件，即可导入JQuery。

步骤二：构建基础的HTML结构

在HTML文件中，你需要为购物车创建一个容器。这个容器将包含所有被添加到购物车里的商品。同时，你还需要创建一个拖拽区域，这里将包含可以被拖拽的商品。

HTML代码如下所示：

<div id="shopping-cart">
  <div id="product-area">
    <div class="product" id="product1">Product 1</div>
    <div class="product" id="product2">Product 2</div>
    <div class="product" id="product3">Product 3</div>
  </div>
  <div id="cart-area"></div>
</div>

上面的代码中，我们创建了一个ID为“shopping-cart”的接收容器。其中，“product-area”是我们定义的可拖拽的产品区域，“cart-area”是购物车的接收区域。

步骤三：实现拖拽操作以及购物车的添加和删除

接下来，我们需要使用JQuery来实现购物车的拖拽效果。你可以使用JQuery UI提供的drag-and-drop插件，它可以轻松地帮你实现这个功能。

在HTML文件中，你需要为可拖拽的产品指定“draggable”属性。同时，你也需要为购物车定义“droppable”属性。

下面是实现拖拽操作以及购物车的添加和删除的完整脚本：

$(function() {
  $(".product").draggable({
    revert: "invalid",
    helper: "clone"
  });

  $("#cart-area").droppable({
    accept: ".product",
    drop: function(event, ui) {
      var product = $(ui.draggable).clone();
      $(this).append(product);
    }
  });

  $("#cart-area").on("click", ".product", function() {
    $(this).remove();
  });
});

上述javascript代码中，我们使用JQuery UI的draggable()和droppable()功能来实现产品的拖拽效果和购物车的接受操作，同时我们使用JQuery的on()方法实现购物车中产品的删除操作。其中，上述代码中的helper:"clone"表示在拖拽过程中，我们使用克隆方法来创建可拖拽的副本。

下面给出另外一个示例，我们将创建另一个购物车，用于接收来自产品区域的可拖拽的商品，并且显示已选商品的数量和总价。

<div id="cart">
  <div id="cart-header">
    <span>Shopping Cart</span>
    <div id="cart-total"></div>
  </div>
  <div id="cart-items"></div>
</div>

<script>
  $(function() {
    $(".product").draggable({
      revert: "invalid",
      helper: "clone",
      cursorAt: { left: 5 }
    });

    $("#cart").droppable({
      drop: function(event, ui) {
        var product = $(ui.draggable).clone();
        var price = parseFloat(product.attr('data-price'));
        var qty = 1;

        var item = $("#cart-items").find("[data-id='" + product.attr('id') + "']");
        if (item.length) {
          qty = parseInt(item.find(".qty").html()) + 1;
          item.find(".qty").html(qty);
          item.find(".subtotal").html(qty * price);

        } else {
          var item_html = '<div class="cart-item" data-id="' + product.attr('id') + '">';
          item_html += '<span class="name">' + product.html() + '</span>';
          item_html += '<span class="price">' + price + '</span>';
          item_html += '<span class="qty">1</span>';
          item_html += '<span class="subtotal">' + price + '</span>';
          item_html += '</div>';

          $("#cart-items").append(item_html);
        }

        updateCartTotal();
      }
    });

    $("#cart-items").on("click", ".cart-item", function(event) {
      $(this).remove();
      updateCartTotal();
    });

    function updateCartTotal() {
      var total_qty = 0, total_price = 0;
      $("#cart-items").find(".cart-item").each(function() {
        var qty = parseInt($(this).find(".qty").html());
        var price = parseFloat($(this).find(".price").html());
        total_qty += qty;
        total_price += qty * price;
      });

      $("#cart-total").html("Items in cart: " + total_qty + ", Total price: " + total_price);
    }
  });
</script>

上述代码中，我们使用了属性“data-price”来存储每个产品的价格信息。同时，我们创建了一个新的购物车接收容器，并且在容器中显示了已选商品的数量和总价。每当选中新的商品放入购物车时，商品数量以及商品总价都会被计算和更新。

好了，上述是我详细讲解“Jquery 快速构建可拖曳的购物车DragDrop”的完整攻略，希望对你有所帮助。