JS实现的简单拖拽购物车功能示例【附源码下载】-Java开发

下面我就简单介绍一下 JS 实现的简单拖拽购物车功能示例的完整攻略。首先，该示例的功能主要就是实现物品拖拽，同时将拖拽到的物品添加到购物车中。

下面我就简单介绍一下 JS 实现的简单拖拽购物车功能示例的完整攻略。首先，该示例的功能主要就是实现物品拖拽，同时将拖拽到的物品添加到购物车中。

示例说明1：创建HTML页面

首先需要创建一个 HTML 页面，该页面内容如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>拖拽购物车功能示例</title>
  <style type="text/css">
    /* 购物车样式 */
    #cart {
      width: 200px;
      height: 200px;
      border: 2px solid #ccc;
      padding: 10px;
      margin: 20px;
      float: right;
    }
    /* 物品样式 */
    .item {
      width: 100px;
      height: 100px;
      border: 2px solid #ccc;
      background-color: #eee;
      cursor: move;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="items">
    <div class="item" id="item1" draggable="true" ondragstart="drag(event)"></div>
    <div class="item" id="item2" draggable="true" ondragstart="drag(event)"></div>
    <div class="item" id="item3" draggable="true" ondragstart="drag(event)"></div>
  </div>
  <div id="cart"></div>
  <script type="text/javascript" src="script.js"></script>
</body>
</html>

上述代码中，主要定义了两个重要的部分：

#items：用来包含所有可拖拽的物品，该部分包含了三个 div，分别表示三个可以拖拽的物品；
#cart：用来表示购物车，该部分在页面上呈现为一个矩形框。

示例说明2：使用JavaScript实现拖拽功能并添加到购物车中

在页面中引入的 script.js 文件包含了 JavaScript 脚本，主要用于实现物品的拖拽功能以及将拖拽到的物品添加到购物车中。下面是 script.js 文件的完整代码：

var dragSrcEl = null;

function handleDragStart(e) {
  this.style.opacity = '0.4';

  dragSrcEl = this;

  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.innerHTML);
}

function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault();
  }
  e.dataTransfer.dropEffect = 'move';
  return false;
}

function handleDragEnter(e) {
  this.classList.add('over');
}

function handleDragLeave(e) {
  this.classList.remove('over');
}

function handleDrop(e) {
  if (e.stopPropagation) {
    e.stopPropagation(); 
  }

  if (dragSrcEl != this) {
    this.innerHTML += e.dataTransfer.getData('text/html');
    dragSrcEl.parentNode.removeChild(dragSrcEl);
  }

  return false;
}

function handleDragEnd(e) {
  this.style.opacity = '1';

  items.forEach(function (item) {
    item.classList.remove('over');
  });
}

var items = document.querySelectorAll('.item');
items.forEach(function(item) {
  item.addEventListener('dragstart', handleDragStart, false);
  item.addEventListener('dragenter', handleDragEnter, false);
  item.addEventListener('dragover', handleDragOver, false);
  item.addEventListener('dragleave', handleDragLeave, false);
  item.addEventListener('drop', handleDrop, false);
  item.addEventListener('dragend', handleDragEnd, false);
});

var cart = document.getElementById('cart');
cart.addEventListener('dragover', handleDragOver, false);
cart.addEventListener('drop', handleDrop, false);

上述代码中，定义了多个函数，并将它们绑定到相应的事件上：