HTML5拖拽式點菜界面是指用戶可以通過拖拽點菜的方式來選購自己所需的食品，頁面交互更加人性化，以下是一個簡單的實現代碼：

<div id="menu">
<ul>
<li class="item" draggable="true" data-title="宮保雞丁" data-price="25">宮保雞丁-25元</li>
<li class="item" draggable="true" data-title="魚香茄子" data-price="22">魚香茄子-22元</li>
<li class="item" draggable="true" data-title="米飯" data-price="2">米飯-2元</li>
<li class="item" draggable="true" data-title="可樂" data-price="5">可樂-5元</li>
</ul>
</div>
<div id="cart">
<ul>
</ul>
</div>
<script>
var menu = document.getElementById('menu');
var cart = document.getElementById('cart');
menu.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text/plain', event.target.dataset.title + '-' + event.target.dataset.price);
});
cart.addEventListener('dragover', function(event) {
event.preventDefault();
});
cart.addEventListener('drop', function(event) {
event.preventDefault();
var data = event.dataTransfer.getData('text/plain');
var item = document.createElement('li');
item.textContent = data;
cart.querySelector('ul').appendChild(item);
});
</script>

以上代碼中，我們創建了兩個div，menu和cart來分別存放菜單和購物車中的菜品，menu中的每一個菜品都是一個li標簽，其中包含了菜品的名稱和價格等信息。通過給li標簽添加draggable屬性，我們指定了菜品是可被拖拽的。

下面我們通過JavaScript來實現拖拽和放置的功能。在拖拽開始時，我們使用event.dataTransfer.setData()方法設置了拖拽的數據，這里我們將菜品的名稱和價格作為數據傳遞。在購物車中，我們通過添加dragover和drop事件來實現放置的操作，其中dragover事件需要阻止默認行為，而drop事件需要調用event.dataTransfer.getData()方法獲取拖拽的數據，并將其添加到購物車中。

如此一來，我們就實現了一個簡單的HTML5拖拽式點菜界面，用戶可以輕松選擇自己喜歡的菜品，并將其添加到購物車當中。