Question

我正在尝试实施一个拖放界面来构建“产品”列表。

每个“产品”都有以下HTML：

<div class="pcontainer" data-id="1" draggable="true" ondragstart="drag(event)">

  <p class="productname">...</p>
  <img class="productimage" href="..."/>

</div>

我想允许用户通过从产品productcontainer div内的任何位置拖动产品并将其放在目标上来将产品添加到“愿望清单”。

放弃目标如下：

<div id="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
  Drop Products Here
</div>

我使用简单的HTML5实现了一个原型，它似乎运行良好，除非我直接点击div中的任何元素，它不会正确拖动。

使用Javascript：

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

function drag(ev)
{
  //get the product id (with jquery)
  var $target = $(ev.target);
  var id = $target.attr('data-id');

  ev.dataTransfer.setData("ID",id);
}

function drop(ev)
{
  ev.preventDefault();
  var id=ev.dataTransfer.getData("ID");

  //do stuff to save product to list using its id
  ...
}

我从this simple demo at w3schools修改了此代码。 有没有一种简单的方法可以让内部元素上的所有拖动转换为容器元素上的拖动？

还是有更好的方法来做到这一点吗？ （浏览器兼容性是这个html5方法的一个大问题）。我知道存在一个jQuery可拖动库，但我不确定它是否是我真正需要的。

UPDATE：

创建了JSFiddle，这样你就可以看到我的意思了： JsFiddle Example

如果您从填充中拖动，则会提醒1，如果您从图像中拖动它会发出警告undefined

Answer 1

Sooo yea ... jquery-ui draggable and droppable正是我所需要的。请参阅这些demos

在容器元素中的任何位置强制拖动事件以拖动容器而不是内部元素

UPDATE：

1 个答案: