<!-- 商品列表 -->
<div id="productList">
  <div class="draggableProduct" data-id="1">商品A</div>
  <div class="draggableProduct" data-id="2">商品B</div>
  <!-- 更多商品... -->
</div>

<script>
// 获取所有需要拖拽的商品元素
let draggableProducts = document.querySelectorAll('.draggableProduct');

draggableProducts.forEach(product => {
  // 初始化拖拽时的位置信息
  let startX, startY;

  product.addEventListener('mousedown', function(event) {
    startX = event.clientX - product.offsetLeft;
    startY = event.clientY - product.offsetTop;
    
    document.addEventListener('mousemove', move);
  });

  function move(event) {
    product.style.transform = `translate(${event.clientX - startX}px, ${event.clientY - startY}px)`;
    event.preventDefault();
  }

  document.addEventListener('mouseup', function() {
    // 在这里可以将新的排序位置保存到数据库
    updateProductOrder(product.dataset.id, product.getBoundingClientRect());

    document.removeEventListener('mousemove', move);
  });
});

// 更新商品在数据库中的排序位置
function updateProductOrder(productId, rect) {
  // 这里是模拟请求，实际应用中应使用fetch或axios等进行异步API调用
  console.log(`更新商品ID为${productId}的位置至：x=${rect.left}, y=${rect.top}`);
}
</script>
