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

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

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

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

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

</div>

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

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
  ...
}

我使用简单的HTML5实现了一个原型，它似乎工作得很好，只是如果我直接单击div中的任何元素，它就不能正确拖动

Javascript:

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

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

</div>

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

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
  ...
}

我从中修改了此代码是否有一种简单的方法可以将内部元素上的所有拖动转换为容器元素上的拖动？

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

更新： 创建了JSFIDLE，以便您可以了解我的实际意思：

---

如果从填充中拖动，则它会发出警报

1

，如果从图像中拖动，则它会发出警报

未定义

太好了。。。jQueryUI可拖动和可拖放正是我所需要的。看这些

你能展示你当前代码的一部分吗？你不能用它做什么？是的，让我试试。问题是，如果单击并拖动任何内部元素（或标记），那么当我需要在容器divOk上拖动时，这些元素就会被拖动。我很确定jQueryUI中的jQuery可拖动/可拖放模块将完全满足您的需要（以及更多），但我不明白为什么您不能在普通javascript中实现这一点。如果从填充它警报1的容器中拖动，或者从它警报未定义的图像中拖动，添加JSFIDLE将帮助其他人发现代码/逻辑的错误