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

编程问答 2022-05-14

问题描述

我制作了一个游戏，您必须将正确的数字相互拖动（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,.8);
  -webkit-Box-shadow: 0 0 .3em rgba(0,.8);
  Box-shadow: 0 0 .3em rgba(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,.8);
  -webkit-Box-shadow: 0 0 .5em rgba(0,.8);
  Box-shadow: 0 0 .5em rgba(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,.8);
  -webkit-Box-shadow: .3em .3em .5em rgba(0,.8);
  Box-shadow: .3em .3em .5em rgba(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>

所以我的问题是：有人可以帮助我让这款游戏在 iphone 或 ipad 上使用thoughscreen。我是编码初学者，希望有人能提供帮助！ （我也是新来的，所以我希望我做对了）

解决方法

<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,window,1,touch.screenX,touch.screenY,touch.clientX,touch.clientY,false,null);

    touch.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}
var correctCards = 0;
$( init );

function init() {
document.addEventListener("touchstart",touchHandler,true);
    document.addEventListener("touchmove",true);
    document.addEventListener("touchend",true);
    document.addEventListener("touchcancel",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,.8);
  -webkit-box-shadow: 0 0 .3em rgba(0,.8);
  box-shadow: 0 0 .3em rgba(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,.8);
  -webkit-box-shadow: 0 0 .5em rgba(0,.8);
  box-shadow: 0 0 .5em rgba(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,.8);
  -webkit-box-shadow: .3em .3em .5em rgba(0,.8);
  box-shadow: .3em .3em .5em rgba(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>

drag-and-drophtmljavascriptjquery-ui-draggable