我如何制作一个可拖曳的物品以用于屏幕 [英] How can i make a draggable item for a thoughscreen
本文介绍了我如何制作一个可拖曳的物品以用于屏幕的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
/*在页面上添加一些空白并设置默认字体和颜色*/身体 {边距:30px;字体家族:乔治亚"，衬线；行高:1.8em；颜色:#333;}/*主要内容区域*/#内容 {文本对齐:居中；-moz-user-select:无；-webkit-user-select:无；用户选择:无；}/*最终卡位置的插槽*/#cardSlots {边距:50px自动0自动;背景:#ddf;}/*最初堆的未分类卡片*/#cardPile {保证金:0自动;背景:#ffd;}#cardSlots，#cardPile {宽度:910px；高度:120像素；内边距:20px;边框:2px实线#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);}/*单个卡和插槽*/#cardSlots div，#cardPile div {向左飘浮;宽度:58px；高度:78像素；内边距:10px;padding-top:40像素；padding-bottom:0;边框:2px实线#333；-moz-border-radius:10px;-webkit-border-radius:10px;border-radius: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;font-size: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;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);内边距:20px;} <！doctype html>< html lang ="zh-CN">< head>< 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">varcorrectCards = 0;$(init);函数init(){//隐藏成功消息$('#successMessage').hide();$('#successMessage').css({左:"580px"，顶部:"250px"，宽度:0，高度:0})；//重置游戏correctCards = 0;$('#cardPile').html('');$('#cardSlots').html('');//创建一堆洗牌var numbers = [1，2，3，4，4，5，6，7，8，9，10];Numbers.sort(function(){return Math.random()-.5});对于(var i = 0; i< 10; i ++){$('< div>'+数字[i] +'</div>').data('数字'，数字[i]).attr('id'，'卡片'+数字[i]).appendTo('#cardPile').draggable({遏制:#content"，堆栈:#cardPile div"，光标:移动"，恢复:true})；}//创建卡槽var words = ['一个'，'两个'，'三个'，'四个'，'五个'，'六个'，'七个'，'八个'，'九个'，'十个']；对于(var i = 1; i< = 10; i ++){$('< div>'+单词[i-1] +'</div>').data('number'，i).appendTo('#cardSlots').droppable({接受:#cardPile div"，hoverClass:悬停"，掉落:handleCardDrop})；}}函数handleCardDrop(event，ui){var slotNumber = $(this).data('number');var cardNumber = ui.draggable.data('number');//如果卡已放入正确的插槽，//更改卡的颜色，直接定位//位于广告位顶部，并防止其被拖动//再次如果(slotNumber == cardNumber){ui.draggable.addClass('正确');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 ++;}//如果所有卡都已正确放置，则显示一条消息//并重置卡片以进行其他操作如果(correctCards == 10){$('#successMessage').show();$('#successMessage').animate({左:"380px"，顶部:"200px"，宽度:"400px"，高度:"100px"，不透明度:1})；}}</script></head>< body>< div id ="content">< div id ="cardPile"></div>< div id ="cardSlots"></div>< div id ="successMessage">< h2>您做到了！</h2>< button onclick ="init()">再次播放</button></div></div></body></html> 所以我的问题是:有人可以帮助我让这款游戏在带屏幕的iPhone或iPad上运行.我是编码的初学者，希望有人能提供帮助！(我是新来的，所以我希望我做对了)
解决方案
< 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">函数touchHandler(event){var touch = event.changedTouches [0];var SimulationEvent = document.createEvent("MouseEvent");SimulationEvent.initMouseEvent({touchstart:"mousedown"，touchmove:"mousemove"，touchend:鼠标"} [event.type]，true，true，window，1touch.screenX，touch.screenY，touch.clientX，touch.clientY，false，false，false，false，0，null)；touch.target.dispatchEvent(simulatedEvent);event.preventDefault();}varcorrectCards = 0;$(init);函数init(){document.addEventListener("touchstart"，touchHandler，true);document.addEventListener("touchmove"，touchHandler，true);document.addEventListener("touchend"，touchHandler，true);document.addEventListener("touchcancel"，touchHandler，true);//隐藏成功消息$('#successMessage').hide();$('#successMessage').css({左:"580px"，顶部:"250px"，宽度:0，高度:0})；//重置游戏correctCards = 0;$('#cardPile').html('');$('#cardSlots').html('');//创建一堆洗牌var numbers = [1，2，3，4，4，5，6，7，8，9，10];Numbers.sort(function(){return Math.random()-.5});对于(var i = 0; i< 10; i ++){$('< div>'+数字[i] +'</div>').data('数字'，数字[i]).attr('id'，'卡片'+数字[i]).appendTo('#cardPile').draggable({遏制:#content"，堆栈:#cardPile div"，光标:移动"，恢复:true})；}//创建卡槽var words = ['一个'，'两个'，'三个'，'四个'，'五个'，'六个'，'七个'，'八个'，'九个'，'十个']；对于(var i = 1; i< = 10; i ++){$('< div>'+单词[i-1] +'</div>').data('number'，i).appendTo('#cardSlots').droppable({接受:#cardPile div"，hoverClass:悬停"，掉落:handleCardDrop})；}}函数handleCardDrop(event，ui){var slotNumber = $(this).data('number');var cardNumber = ui.draggable.data('number');//如果卡已放入正确的插槽，//更改卡的颜色，直接将其放置//位于广告位顶部，并防止其被拖动//再次如果(slotNumber == cardNumber){ui.draggable.addClass('正确');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 ++;}//如果所有卡都已正确放置，则显示一条消息//并重置卡片以进行其他操作如果(correctCards == 10){$('#successMessage').show();$('#successMessage').animate({左:"380px"，顶部:"200px"，宽度:"400px"，高度:"100px"，不透明度:1})；}}</script> <元http-equiv ="Content-Type" content ="text/html; charset = utf-8">< link rel ="stylesheet" type ="text/css" href ="style.css">< style>/*在页面上添加一些边距并设置默认字体和颜色*/身体 {边距:30px;字体家族:乔治亚"，衬线；行高:1.8em；颜色:#333;}/*主要内容区域*/#内容 {文本对齐:居中；-moz-user-select:无；-webkit-user-select:无；用户选择:无；}/*最终卡位置的插槽*/#cardSlots {边距:50px自动0自动;背景:#ddf;}/*最初堆的未分类卡片*/#cardPile {保证金:0自动;背景:#ffd;}#cardSlots，#cardPile {宽度:910px；高度:120像素；内边距:20px;边框:2px实线#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);}/*单个卡和插槽*/#cardSlots div，#cardPile div {向左飘浮;宽度:58px；高度:78像素；内边距:10px;padding-top:40像素；padding-bottom:0;边框:2px实线#333；-moz-border-radius:10px;-webkit-border-radius:10px;border-radius: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;font-size: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;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);内边距:20px;}</style> < div id ="content">< div id ="cardPile"></div>< div id ="cardSlots"></div>< div id ="successMessage">< h2>您做到了！</h2>< button onclick ="init()">再次播放</button></div></div> i made a game where you have to drag the right numbers to each other (1 -> one). But it does not work on a phone or ipad. I am not able to drag the draggable items with a thoughscreen.
/* 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>
So my question is: can someone help me making this game work for an iphone or ipad with thoughscreen. I am a beginner at coding and hope someone can help! (I am new to SO as wel so i hope i did it right)
解决方案
<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>
这篇关于我如何制作一个可拖曳的物品以用于屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
