html5拖拽制作点菜单

HTML5拖拽功能可以通过JavaScript来实现。下面是一个简单的示例，可以用来制作一个简单的点菜单：

HTML代码：

<div id="menu">
  <div class="item" draggable="true" ondragstart="drag(event)">Item 1</div>
  <div class="item" draggable="true" ondragstart="drag(event)">Item 2</div>
  <div class="item" draggable="true" ondragstart="drag(event)">Item 3</div>
</div>

<div id="cart" ondrop="drop(event)" ondragover="allowDrop(event)">
  <h2>Cart</h2>
</div>

JavaScript代码：

function allowDrop(event) {
  event.preventDefault();
}

function drag(event) {
  event.dataTransfer.setData("text", event.target.id);
}

function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("text");
  var item = document.getElementById(data);
  var cart = document.getElementById("cart");
  cart.appendChild(item);
}

在上面的示例中，我们创建了两个div元素，一个用于菜单，一个用于购物车。我们还为菜单项添加了一个属性“draggable”，并为其添加了一个事件处理程序“ondragstart”，该事件处理程序将数据存储在数据传输对象中。

在购物车div上，我们还添加了两个事件处理程序：“ondrop”和“ondragover”，它们分别用于处理拖放事件和允许元素拖放到该元素上。

最后，我们还定义了三个函数：allowDrop（允许放置），drag（拖动）和drop（放置）。这些函数分别处理拖动操作和放置操作。

当用户将一个菜单项拖动到购物车div上时，drop函数将被调用。该函数通过数据传输对象获取拖动的元素，并将其添加到购物车div中。