当位于区域上方时，如何将多个项目独立移动到某个位置？答案

【问题标题】：How to move an drag and drop several items to a certain position independently, when located over area?当位于区域上方时，如何将多个项目独立移动到某个位置？
【发布时间】：2018-06-11 19:46:59
【问题描述】：

跟进问题 How to move an drag and drop item to a certain position, when located over canvas? 又出现了一个问题：当实现多个动画 div 时，它们都会做出反应，如果动画被触发，即如果一个 div 在黄色容器上方。但只有黄色容器上方的那个会做出反应。

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
    <meta 
     name='viewport' 
      content='width=50px, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,' 
     /> 
  <title>Drag and Drop</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>


<style> 

#container1 {
  width: 200px;
  height: 200px;
  position: absolute;
  background: yellow;
  top: 100px
}

#container2 {
  width: 200px;
  height: 200px;
  position: absolute;
  background: yellow;
  top: 100px
}
  
body {
  position: relative;
}

#div1 {
  position: absolute;
  top: 0px;
  left: 100px;
  height: 72px;
  width: 72px;
  background: red;
  border: 0px solid #666;
  margin: 0;
  padding: 0;
}

#div2 {
  position: absolute;
  top: 0px;
  left: 100px;
  height: 72px;
  width: 72px;
  background: blue;
  border: 0px solid #666;
  margin: 0;
  padding: 0;
}


</style>  
  <title>Clean up</title>
</head>

<body>

  <div id="container1"></div> 
   <div id="container2"></div> 
  <div class="draggable" id="div1"></div>
  <div class="draggable" id="div2"></div>
  <!--<div id="animateBtn">Animate</div>-->
    <div type="image" align="bottom" width="45px" src="refresh.png" onClick="window.location.href=window.location.href">
<script>

$(document).ready(function( event, ui ) {
  $('#div1').draggable();
  $('#container1').droppable({
    drop: function() {
    $('#div1').animate({top:"100px", left:"100px"});
    }
  });
 });
 
$(document).ready(function(event, ui) {
  $('#div2').draggable();
  $('#container2').droppable({
    drop: function() {
    $('#div2').animate({top:"100px", left:"100px"});
    }
  });
 });
 
var nodeList = document.getElementsByClassName('draggable');
 
  for(var i=0;i<nodeList.length;i++) {
    var obj = nodeList[i];
    obj.addEventListener('touchmove', function(event) {
      var touch = event.targetTouches[0];
      
      // Place element where the finger is
      event.target.style.left = touch.pageX + 'px';
      event.target.style.top = touch.pageY + 'px';
      event.preventDefault();
    }, false);
  } 
  


</script>

</body>
</html>

关于如何只为位于黄色 div 上方的一个 div 设置动画是否有任何解决方案？尝试使用接受：'#div1'，但我无法开始工作，但...

【问题讨论】：

标签： javascript jquery html css drag-and-drop

【解决方案1】：

我找到了一个解决方案（我发现了一个错误；））它适用于接受，请参见下面的代码：

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
    <meta 
     name='viewport' 
      content='width=50px, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,' 
     /> 
  <title>Drag and Drop</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>


<style> 

#container1 {
  width: 200px;
  height: 200px;
  position: absolute;
  background: yellow;
  top: 100px
}

#container2 {
  width: 200px;
  height: 200px;
  position: absolute;
  background: yellow;
  top: 100px
}
  
body {
  position: relative;
}

#div1 {
  position: absolute;
  top: 0px;
  left: 100px;
  height: 72px;
  width: 72px;
  background: red;
  border: 0px solid #666;
  margin: 0;
  padding: 0;
}

#div2 {
  position: absolute;
  top: 0px;
  left: 100px;
  height: 72px;
  width: 72px;
  background: blue;
  border: 0px solid #666;
  margin: 0;
  padding: 0;
}


</style>  
  <title>Clean up</title>
</head>

<body>

  <div id="container1"></div> 
   <div id="container2"></div>
  <div class="draggable" id="div1"></div>
  <div class="draggable" id="div2"></div>
  <!--<div id="animateBtn">Animate</div>-->
    <div type="image" align="bottom" width="45px" src="refresh.png" onClick="window.location.href=window.location.href">
<script>

$(document).ready(function( event, ui ) {
  $('#div1').draggable();
  $('#container1').droppable({
  accept: '#div1',
    drop: function() {
    $('#div1').animate({top:"100px", left:"100px"});
    }
  });
 });
 
$(document).ready(function(event, ui) {
  $('#div2').draggable();
  $('#container2').droppable({
  accept: '#div2',
    drop: function() {
    $('#div2').animate({top:"100px", left:"100px"});
    }
  });
 });
 
var nodeList = document.getElementsByClassName('draggable');
 
  for(var i=0;i<nodeList.length;i++) {
    var obj = nodeList[i];
    obj.addEventListener('touchmove', function(event) {
      var touch = event.targetTouches[0];
      
      // Place element where the finger is
      event.target.style.left = touch.pageX + 'px';
      event.target.style.top = touch.pageY + 'px';
      event.preventDefault();
    }, false);
  } 
  


</script>

</body>
</html>

【讨论】：