0

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

每个“产品”都有以下 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
  ...
}

我在 w3schools 这个简单的演示中修改了这段代码。 有没有一种简单的方法可以使内部元素上的所有拖动转换为容器元素上的拖动？

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

更新：

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

如果您从填充中拖动它会发出警报1，如果您从图像中拖动它会发出警报undefined

4

1 回答 1

1

Sooo 是的... jquery-ui 可拖动和可放置正是我所需要的。查看这些演示

于 2012-12-15T00:13:57.683 回答