当位于画布上时，如何将拖放项目移动到某个位置？答案

【问题标题】：How to move an drag and drop item to a certain position, when located over canvas?当位于画布上时，如何将拖放项目移动到某个位置？
【发布时间】：2018-06-11 15:41:33
【问题描述】：

我正在使用可拖动对象的平板电脑环境。拖放有效，甚至可以一次拖动多个对象。

参考文献是：

Reference 1 & Reference 2

这是我的代码当前版本的样子：

<!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,' 
     /> 
<!-- 

Refernces:
* https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Drag_and_Drop
* https://mobiforge.com/design-development/touch-friendly-drag-and-drop
-->
     
<style> 

#container {
  width: 200px;
  height: 200px;
  position: relative;
  background: yellow;
  top: 100px
}
  
main1 {
  position: relative;
  }

div1 {

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

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

<body>



<div id ="container">
</div> 
 
<main1 id="main1">
    <div1 class="draggable" id="d1-0""></div1>
</main1>

  
<script>

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>

这个想法是，红色框 (div1) 可以在屏幕上随处移动、拖放。但是当它进入黄色画布时，它需要移动到它的初始起始位置。（这个想法是“清理”并“将对象移回它们原来的位置”。）

【问题讨论】：

您希望red div 在进入yellow div 或松开鼠标后立即捕捉到特定位置？
感谢 Alex，您的快速回复！当红色 div 进入黄色 div 并释放鼠标时。

标签： javascript html drag-and-drop

【解决方案1】：

你应该使用 jQuery UI 的可拖动和触控来实现移动友好性

让我知道这是否接近您的要求，我们可以根据需要进行调整

$(document).ready(function() {
  $('#div1').draggable();
  $('#container').droppable({
    drop: function( event, ui ) {
       alert("You dropped the red on the yellow");
    }
  });
  $(document).on("click", "#animateBtn", function() {
    //Simple animate w/ just specifying the offsets
    //$('#div1').animate({top:"250px", left:"250px"});
    
    //Other animate options
    $('#div1').animate({
        top:"15px",
        left:"15px"
      }, {
        duration:555, //Animation time in pixels
        easing:"easeOutQuart"  //See https://api.jqueryui.com/easings/
      }); 
  });
});

#container {
  width: 200px;
  height: 200px;
  position: relative;
  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;
}

#animateBtn {
  position:fixed;
  right:10px;
  bottom:10px;
  display:inline-block;
  padding:3px 5px;
  background-color:green;
  color:white;
  border-radius:6px
}

<!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>
</head>

<body>
  <div id="container"></div> 
  <div class="draggable" id="div1"></div>
  <div id="animateBtn">Animate</div>
</body>
</html>

【讨论】：

非常感谢汤姆·格肯！是的，真的很好，谢谢！下一个问题是添加一个函数来将红色 div 移动到屏幕上的某些坐标 - 使用 animate 执行此操作是否有意义？
我假设必须添加一个将红色 div 移动到屏幕上某些坐标的功能 - 这意味着，红色 div 的初始坐标是必需的（它们可以从 #div1在 css 中？）并且需要有一个函数将红色 div 移动到相应的坐标。我找到了几个关于如何相对于当前位置移动对象的教程（例如 [w3schools.com/howto/howto_js_animate.asp]），这并不是我真正想要的。
没有问题 Melanie，是的，使用 jQuery 的 animate 函数，指定顶部和左侧偏移量（如果您试图将对象居中，通常需要添加对象的一半宽度/高度）我在我的答案中添加了一个示例
我试图在函数代码中包含这样的内容，但我似乎犯了一个错误，因为 div 不再可拖动： $(document).ready(function () { $('#div1').draggable(); $('#container').droppable({ drop: function( 100, 0 ) { var d = document.getElementById('div1'); d.style .position = "绝对"; d.style.left = 100 +'px'; d.style.top = 0 +'px'; } }); });
哇，真是太棒了！非常感谢@Tom Gerken！我会尝试将动画与drop功能合并（用动画替换alert）！

【解决方案2】：

<!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> 

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

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


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

<body>

  <div id="container"></div> 
  <div class="draggable" id="div1"></div>
  <!--<div id="animateBtn">Animate</div>-->

<script>

$(document).ready(function() {
  $('#div1').draggable();
  $('#container').droppable({
    drop: function() {
    $('#div1').animate({top:"100px", left:"100px"});
    }
  });
 });
 


</script>

</body>
</html>

【讨论】：