Javascript HTML5中的多个删除事件_Javascript_Html_Drag And Drop

Javascript HTML5中的多个删除事件

javascript html

Javascript HTML5中的多个删除事件,javascript,html,drag-and-drop,Javascript,Html,Drag And Drop,我试图在HTML5中创建一个拖放功能，在这里我可以从一个列表拖动到另一个列表。我有一个列表包含可拖动的项目，另一个列表包含添加了拖放事件的项目。问题是，无论我放置在哪个元素上，添加的最后一个放置事件都是被调用的事件谢谢你的帮助和建议我已将我的代码包括在下面： <!DOCTYPE html> <head> <title>List Conversion Test</title> <style type="text/css"> #l

我试图在HTML5中创建一个拖放功能，在这里我可以从一个列表拖动到另一个列表。我有一个列表包含可拖动的项目，另一个列表包含添加了拖放事件的项目。问题是，无论我放置在哪个元素上，添加的最后一个放置事件都是被调用的事件

谢谢你的帮助和建议

我已将我的代码包括在下面：

<!DOCTYPE html>

<head>
<title>List Conversion Test</title>

<style type="text/css">

#list, #cart {
  display: inline;
  float: left;
  border: 1px solid #444;
  margin: 25px;
  padding: 10px;
}

#list p {
  background-color: #036;
  color: #fff;
}
#cart p {
  background-color: #363;
  color: #fff;
}

.listitem {

}

.listitem_done {
  text-decoration: line-through;
}

.product {
  background-color: #CCC;
}

.product_over {
  background-color: #363;
}

</style>


<script type="text/javascript" src="http://html5demos.com/js/h5utils.js"></script>

</head>

<body>

<article>
  <div id="list">
    <p>On My List</p>
    <ul>
      <li class="listitem" id="L001">Shopping List Item #1</li>
      <li class="listitem" id="L002">Shopping List Item #2</li>
    </ul>
    <div id="done">
      <p>In My Cart</p>
      <ul></ul>
    </div>
  </div>

  <div id="cart">
    <p>Cart</p>
    <ul>
      <li class="product" id="P001">Product #1</li>
      <li class="product" id="P002">Product #2</li>
    </ul>
  </div>

</article>
<script>

  // make list items draggable
  var list = document.querySelectorAll('li.listitem'), thisItem = null;
  for (var i = 0; i < list.length; i++) {
    thisItem = list[i];

    thisItem.setAttribute('draggable', 'true');

    addEvent(thisItem, 'dragstart', function (e) {
      e.dataTransfer.effectAllowed = 'copy';
      e.dataTransfer.setData('Text', this.id);
    });
  }


  // give products drop events
  var products = document.querySelectorAll('li.product'), thisProduct = null;
  for (var i = 0; i < products.length; i++) {
    thisProduct = products[i];

    addEvent(thisProduct, 'dragover', function (e) {
      if (e.preventDefault) e.preventDefault();
      this.className = 'product_over';
      e.dataTransfer.dropEffect = 'copy';
      return false;
    });

    addEvent(thisProduct, 'dragleave', function () {
     this.className = 'product';
    });

    addEvent(thisProduct, 'drop', function (e) {
      //alert(thisProduct.id);
      if (e.stopPropagation) e.stopPropagation();
      var thisItem = document.getElementById(e.dataTransfer.getData('Text'));
      thisItem.parentNode.removeChild(thisItem);
      thisProduct.className = 'product';
      handleDrop(thisItem, thisProduct);
      return false;
    });

  }

  // handle the drop
  function handleDrop(i, p) {
    alert(i.id + ' to ' + p.id);
    var done = document.querySelector('#done > ul');
    done.appendChild(i);
    i.className = 'listitem_done';
  } 


</script>

</body>
</html>


列表转换测试
#列表，#购物车{
显示：内联；
浮动：左；
边框：1px实心#444；
利润率：25px；
填充：10px；
}
#列表p{
背景色：#036；
颜色：#fff；
}
#购物车p{
背景色：#363；
颜色：#fff；
}
.listitem{
}
.listitem_完成{
文字装饰：线条贯通；
}
.产品{
背景色：#CCC；
}
.产品名称{
背景色：#363；
}
在我的名单上

购物清单项目#1
购物清单项目2

在我的车里

推车

产品#1
产品#2

//使列表项可拖动
var list=document.querySelectorAll（'li.listitem'），thisItem=null；
对于（变量i=0；iul”）；
完成。儿童（i）；
i、 className='listitem_done'；
}

这就是为什么在循环中定义函数（如回调函数）通常是个坏主意。您正在循环中分配

thisProduct

，但它将在循环的下一次迭代中重新分配。按照闭包的设置方式，每个回调都绑定到同一个变量

thisProduct

，并将使用最新的值

一种可能的修复方法是在需要

此产品的地方创建一个新的闭包，例如
(function(thisProduct) {
    addEvent(thisProduct, 'drop', function (e) {
      //alert(thisProduct.id);
      if (e.stopPropagation) e.stopPropagation();
      var thisItem = document.getElementById(e.dataTransfer.getData('Text'));
      thisItem.parentNode.removeChild(thisItem);
      thisProduct.className = 'product';
      handleDrop(thisItem, thisProduct);
      return false;
    });
}(thisProduct));

这似乎对我现在起作用了。有关更多说明，请参阅。
谢谢！这就是为什么最后一个id总是出现的原因。MDN链接很有帮助；看来我有点需要学习闭包。