How to move an drag and drop item to a certain position, when located over canvas?

问题

I am working on a Tablet-environment with draggable objects. The drag & drop works, it is even possible to drag several objects at once, when implemented.

References are :

Reference 1 & Reference 2

This is how the current version of my code looks like:

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

The idea is, that the red box (div1) can be moved, dragged and dropped everywhere on the screen. But it needs to be moved to its very initial starting position, when it enters the yellow canvas. (The idea is to "clean up" and "move objects back to where they came from".)

回答1:

You should use jQuery UI's draggable and touch punch for mobile friendliness

Let me know if this is close to what you're looking for and we can adjust as needed

$(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>

回答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>

来源：https://stackoverflow.com/questions/50801496/how-to-move-an-drag-and-drop-item-to-a-certain-position-when-located-over-canva

标签

javascript

html

drag-and-drop