如何为触摸屏制作可拖动的项目 [英] How can i make a draggable item for a touchscreen
本文介绍了如何为触摸屏制作可拖动的项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我制作了一个游戏，您必须将正确的数字相互拖动(1 -> 一个).但它不适用于手机或 ipad.我无法通过屏幕拖动可拖动的项目.
/* 给页面添加一些边距并设置默认字体和颜色 */身体 {边距:30px；字体系列:格鲁吉亚"，衬线；行高:1.8em；颜色:#333；}/* 主要内容区 */#内容 {文本对齐:居中；-moz-user-select:无；-webkit-user-select:无；用户选择:无；}/* 最终卡片位置的插槽 */#cardSlots {边距:50px 自动 0 自动；背景:#ddf;}/* 最初的一堆未排序的卡片 */#cardPile {边距:0 自动；背景:#ffd;}#cardSlots, #cardPile {宽度:910px；高度:120px；填充:20px；边框:2px 实心 #333；-moz-border-radius: 10px;-webkit-border-radius: 10px;边框半径: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);}/* 个人卡和插槽 */#cardSlots div, #cardPile div {向左飘浮;宽度:58px；高度:78px；填充:10px；填充顶部:40px；填充底部:0;边框:2px 实心 #333；-moz-border-radius: 10px;-webkit-border-radius: 10px;边框半径:10px；边距:0 0 0 10px；背景:#fff;}#cardSlots div:first-child, #cardPile div:first-child {左边距:0；}#cardSlots div.hovered {背景:#aaa;}#cardSlots div {边框样式:虚线；}#cardPile div {背景:#666；颜色:#fff;字体大小:50px；文本阴影: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);}/* 各色卡片 */#card1.correct { 背景:红色；}#card2.correct { 背景:棕色；}#card3.correct { 背景:橙色；}#card4.correct { 背景:黄色；}#card5.correct { 背景:绿色；}#card6.correct { 背景:青色；}#card7.correct { 背景:蓝色；}#card8.correct { 背景:靛蓝；}#card9.correct { 背景:紫色；}#card10.correct { 背景:紫色；}/* 你做到了！"信息 */#successMessage {位置:绝对；左:580px；顶部:250px；宽度:0；高度:0；z-索引:100；背景:#dfd;边框:2px 实心 #333；-moz-border-radius: 10px;-webkit-border-radius: 10px;边框半径: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);填充:20px；}<html lang="zh-cn"><头><title>一个jQuery拖放数字卡游戏</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 正确卡片 = 0;$(初始化);函数初始化(){//隐藏成功信息$('#successMessage').hide();$('#successMessage').css({左:'580px'，顶部:'250px'，宽度:0，高度:0});//重置游戏正确卡片 = 0;$('#cardPile').html('');$('#cardSlots').html('');//创建一堆洗过的牌无功数字 = [ 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( {遏制:'#content'，stack: '#cardPile div',光标:'移动'，回复:真});}//创建卡槽var words = ['一'，'二'，'三'，'四'，'五'，'六'，'七'，'八'，'九'，'十'];for ( var i=1; i<=10; i++ ) {$('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {接受:'#cardPile div',悬停类:'悬停'，掉落:handleCardDrop});}}函数handleCardDrop(事件，ui){var slotNumber = $(this).data('number');var cardNumber = ui.draggable.data('number');//如果卡片被放入正确的插槽，//改变卡片颜色，直接定位//在插槽的顶部，并防止它被拖动//再次if ( slotNumber == cardNumber ) {ui.draggable.addClass('正确');ui.draggable.draggable('禁用');$(this).droppable('禁用');ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );ui.draggable.draggable('option', 'revert', false );正确的卡片++；}//如果所有卡片都已正确放置，则显示一条消息//并重置卡片以进行另一次尝试如果(正确卡片 == 10){$('#successMessage').show();$('#successMessage').animate({左:'380px'，顶部:'200px'，宽度:'400px'，高度:'100px'，不透明度:1});}}<身体><div id="内容"><div id="cardPile"><div id="cardSlots">
<div id="successMessage"><h2>你做到了！</h2><button onclick="init()">再次播放</button>
