Как переместить элемент перетаскивания в определенную позицию, если он расположен над холстом? - PullRequest
Новая
       8

Как переместить элемент перетаскивания в определенную позицию, если он расположен над холстом?

0 голосов
/ 11 июня 2018

Я работаю в планшетном окружении с перетаскиваемыми объектами.Перетаскивание работает, даже возможно перетащить несколько объектов одновременно, когда реализовано.

Ссылки:

Ссылка 1 & Ссылка 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) можно перемещать, перетаскивать и опускать повсюду на экране.Но его нужно переместить в исходное начальное положение, когда он входит в желтый холст.(Идея состоит в том, чтобы «очистить» и «переместить объекты туда, откуда они пришли».)

Ответы [ 2 ]

0 голосов
/ 11 июня 2018 

<!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>
0 голосов
/ 11 июня 2018

Вы должны использовать перетаскиваемый и сенсорный удар 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>
...