如何为触摸屏制作可拖动项目

Posted

技术标签:

【中文标题】如何为触摸屏制作可拖动项目【英文标题】：How can i make a draggable item for a touchscreen 【发布时间】：2021-07-05 05:02:13 【问题描述】：

我制作了一个游戏，您必须将正确的数字相互拖动（1 -> 一个）。但它不适用于手机或 ipad。我无法通过屏幕拖动可拖动的项目。

/* Add some margin to the page and set a default font and colour */

body 
  margin: 30px;
  font-family: "Georgia", serif;
  line-height: 1.8em;
  color: #333;


/* Main content area */

#content 

  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;


/* Slots for final card positions */

#cardSlots 
  margin: 50px auto 0 auto;
  background: #ddf;


/* The initial pile of unsorted cards */

#cardPile 
  margin: 0 auto;
  background: #ffd;


#cardSlots, #cardPile 
  width: 910px;
  height: 120px;
  padding: 20px;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .3em rgba(0, 0, 0, .8);


/* Individual cards and slots */

#cardSlots div, #cardPile div 
  float: left;
  width: 58px;
  height: 78px;
  padding: 10px;
  padding-top: 40px;
  padding-bottom: 0;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin: 0 0 0 10px;
  background: #fff;


#cardSlots div:first-child, #cardPile div:first-child 
  margin-left: 0;


#cardSlots div.hovered 
  background: #aaa;


#cardSlots div 
  border-style: dashed;


#cardPile div 
  background: #666;
  color: #fff;
  font-size: 50px;
  text-shadow: 0 0 3px #000;


#cardPile div.ui-draggable-dragging 
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);


/* Individually coloured cards */

#card1.correct  background: red; 
#card2.correct  background: brown; 
#card3.correct  background: orange; 
#card4.correct  background: yellow; 
#card5.correct  background: green; 
#card6.correct  background: cyan; 
#card7.correct  background: blue; 
#card8.correct  background: indigo; 
#card9.correct  background: purple; 
#card10.correct  background: violet; 


/* "You did it!" message */
#successMessage 
  position: absolute;
  left: 580px;
  top: 250px;
  width: 0;
  height: 0;
  z-index: 100;
  background: #dfd;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  padding: 20px;

<!doctype html>
<html lang="en">
<head>

<title>A jQuery Drag-and-Drop Number Cards Game</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

<script type="text/javascript">

var correctCards = 0;
$( init );

function init() 

  // Hide the success message
  $('#successMessage').hide();
  $('#successMessage').css( 
    left: '580px',
    top: '250px',
    width: 0,
    height: 0
   );

  // Reset the game
  correctCards = 0;
  $('#cardPile').html( '' );
  $('#cardSlots').html( '' );

  // Create the pile of shuffled cards
  var numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
  numbers.sort( function()  return Math.random() - .5  );

  for ( var i=0; i<10; i++ ) 
    $('<div>' + numbers[i] + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( 
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'move',
      revert: true
     );
  

  // Create the card slots
  var words = [ 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' ];
  for ( var i=1; i<=10; i++ ) 
    $('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( 
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
     );
  



function handleCardDrop( event, ui ) 
  var slotNumber = $(this).data( 'number' );
  var cardNumber = ui.draggable.data( 'number' );

  // If the card was dropped to the correct slot,
  // change the card colour, position it directly
  // on top of the slot, and prevent it being dragged
  // again

  if ( slotNumber == cardNumber ) 
    ui.draggable.addClass( 'correct' );
    ui.draggable.draggable( 'disable' );
    $(this).droppable( 'disable' );
    ui.draggable.position(  of: $(this), my: 'left top', at: 'left top'  );
    ui.draggable.draggable( 'option', 'revert', false );
    correctCards++;
  

  // If all the cards have been placed correctly then display a message
  // and reset the cards for another go

  if ( correctCards == 10 ) 
    $('#successMessage').show();
    $('#successMessage').animate( 
      left: '380px',
      top: '200px',
      width: '400px',
      height: '100px',
      opacity: 1
     );
  



</script>

</head>
<body>

<div id="content">

  <div id="cardPile"> </div>
  <div id="cardSlots"> </div>

  <div id="successMessage">
    <h2>You did it!</h2>
    <button onclick="init()">Play Again</button>
  </div>

</div>

</body>
</html>

所以我的问题是：有人可以帮我制作这款游戏​​，使其适用于带thoughscreen 的iphone 或ipad。我是编码初学者，希望有人能提供帮助！ （我也是新手，所以我希望我做对了）

【问题讨论】：

感谢迈克的第一次贡献。做得很好 - 你做得对:) 有一些小的拼写错误。您应该修复“thoughscreen”，这是一个非常具有误导性的问题。此外，您可以再添加两个标签：HTML、CSS。 感谢@BjörnvonTRITUM 的评论。我的英语不是很好哈哈。感谢您的提示！ 这对您有帮助吗？ ***.com/questions/3026915/…查看问题的底部编辑。 @ChloeAnderson 你能帮我写代码吗？我不能让它工作 【参考方案1】： 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

<script type="text/javascript">
function touchHandler(event) 
    var touch = event.changedTouches[0];

    var simulatedEvent = document.createEvent("MouseEvent");
        simulatedEvent.initMouseEvent(
        touchstart: "mousedown",
        touchmove: "mousemove",
        touchend: "mouseup"
    [event.type], true, true, window, 1,
        touch.screenX, touch.screenY,
        touch.clientX, touch.clientY, false,
        false, false, false, 0, null);

    touch.target.dispatchEvent(simulatedEvent);
    event.preventDefault();

var correctCards = 0;
$( init );

function init() 
document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);
  // Hide the success message
  $('#successMessage').hide();
  $('#successMessage').css( 
    left: '580px',
    top: '250px',
    width: 0,
    height: 0
   );

  // Reset the game
  correctCards = 0;
  $('#cardPile').html( '' );
  $('#cardSlots').html( '' );

  // Create the pile of shuffled cards
  var numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
  numbers.sort( function()  return Math.random() - .5  );

  for ( var i=0; i<10; i++ ) 
    $('<div>' + numbers[i] + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( 
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'move',
      revert: true
     );
  

  // Create the card slots
  var words = [ 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' ];
  for ( var i=1; i<=10; i++ ) 
    $('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( 
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
     );
  



function handleCardDrop( event, ui ) 
  var slotNumber = $(this).data( 'number' );
  var cardNumber = ui.draggable.data( 'number' );

  // If the card was dropped to the correct slot,
  // change the card colour, position it directly
  // on top of the slot, and prevent it being dragged
  // again

  if ( slotNumber == cardNumber ) 
    ui.draggable.addClass( 'correct' );
    ui.draggable.draggable( 'disable' );
    $(this).droppable( 'disable' );
    ui.draggable.position(  of: $(this), my: 'left top', at: 'left top'  );
    ui.draggable.draggable( 'option', 'revert', false );
    correctCards++;
  

  // If all the cards have been placed correctly then display a message
  // and reset the cards for another go

  if ( correctCards == 10 ) 
    $('#successMessage').show();
    $('#successMessage').animate( 
      left: '380px',
      top: '200px',
      width: '400px',
      height: '100px',
      opacity: 1
     );
  



</script>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<style>

/* Add some margin to the page and set a default font and colour */

body 
  margin: 30px;
  font-family: "Georgia", serif;
  line-height: 1.8em;
  color: #333;


/* Main content area */

#content 

  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;


/* Slots for final card positions */

#cardSlots 
  margin: 50px auto 0 auto;
  background: #ddf;


/* The initial pile of unsorted cards */

#cardPile 
  margin: 0 auto;
  background: #ffd;


#cardSlots, #cardPile 
  width: 910px;
  height: 120px;
  padding: 20px;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .3em rgba(0, 0, 0, .8);


/* Individual cards and slots */

#cardSlots div, #cardPile div 
  float: left;
  width: 58px;
  height: 78px;
  padding: 10px;
  padding-top: 40px;
  padding-bottom: 0;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin: 0 0 0 10px;
  background: #fff;


#cardSlots div:first-child, #cardPile div:first-child 
  margin-left: 0;


#cardSlots div.hovered 
  background: #aaa;


#cardSlots div 
  border-style: dashed;


#cardPile div 
  background: #666;
  color: #fff;
  font-size: 50px;
  text-shadow: 0 0 3px #000;


#cardPile div.ui-draggable-dragging 
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);


/* Individually coloured cards */

#card1.correct  background: red; 
#card2.correct  background: brown; 
#card3.correct  background: orange; 
#card4.correct  background: yellow; 
#card5.correct  background: green; 
#card6.correct  background: cyan; 
#card7.correct  background: blue; 
#card8.correct  background: indigo; 
#card9.correct  background: purple; 
#card10.correct  background: violet; 


/* "You did it!" message */
#successMessage 
  position: absolute;
  left: 580px;
  top: 250px;
  width: 0;
  height: 0;
  z-index: 100;
  background: #dfd;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  padding: 20px;

</style>
<div id="content">

  <div id="cardPile"> </div>
  <div id="cardSlots"> </div>

  <div id="successMessage">
    <h2>You did it!</h2>
    <button onclick="init()">Play Again</button>
  </div>

</div>

【讨论】：

我已经解决了，但感谢@betrice-mpalanzi 的评论

以上是关于如何为触摸屏制作可拖动项目的主要内容，如果未能解决你的问题，请参考以下文章

如何为 Bootstrap 实现支持拖放的触摸敏感、响应式、可排序列表？

如何为可移动的浮动按钮设置 onTouch 和 onClick 功能

“链接”到可拖动的调用以启用触摸功能

可拖动、可拖放和可移动的触摸幻灯片

Android触摸事件传递机制实践——可拖动大小切换的SizeSwitchView

jQuery UI：使用容差触摸放置对象时的可拖动行为