Jquery 需要用图像替换卡片吗
有没有办法用图像替换可拖放卡？ 这段代码的大部分来自我在互联网上从一个博客上找到的一个例子，这个例子是允许重复使用的，但是这正是我需要完成一项作业的原因&需要帮助才能在大约一周后的死线之前完成Jquery 需要用图像替换卡片吗,jquery,time,variable-assignment,Jquery,Time,Variable Assignment,有没有办法用图像替换可拖放卡？ 这段代码的大部分来自我在互联网上从一个博客上找到的一个例子，这个例子是允许重复使用的，但是这正是我需要完成一项作业的原因&需要帮助才能在大约一周后的死线之前完成 <!doctype html> <html> <head> <title>Drag and Drop</title> <meta http-equiv="Content-Type" content="text/html;charset=
<!doctype html> <html> <head> <title>Drag and Drop</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style type="text/css"> /**
* add style to entire body
* ------------------------
* margin from each side 10px
* line height for each line 1.8em
*/ body { margin: 10px; font-family: "Georgia", serif; line-height: 1.8em; color: #333; } /**
* font-family for headers
*/ h1, h2, h3 { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; } /**
* main content area where colors and empty slots are placed
* ---------------------------------------------------------
* first we apply margin from all sides,
* next we override top margin by 10px
*
*/
#content { margin: auto; margin-top: 10px; text-align: center;
-moz-user-select: none;
-webkit-user-select: none; } /**
* header message with border
*/ .aboutBox { clear: both; text-align: center; margin: auto; padding: 10px; background: #ebedf2; border: 1px solid #333; width: 910px; } .aboutBox h1 { font-weight: bold; margin: 5px; color: #666; font-size:
1.5em; } /**
* empty slots
*/
#colorSlots { margin: 20px auto 0 auto; background: #ddf; } /**
* color queue
*/
#colorQueue { margin: 0 auto; background: #ffd; }
#colorSlots, #colorQueue { width: 910px; height: 150px; padding: 20px; border: 1px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px; border-radius: 10px;
-moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .7);
-webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .7); box-shadow: 0 0 .3em rgba(0, 0, 0, .7); }
#colorSlots div, #colorQueue div { float: left; width: 65px; height: 100px; padding: 10px; padding-top: 40px; padding-bottom: 0; border: 1px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px; border-radius: 10px; margin: 0 0 0 10px; background: #fff; }
#colorSlots div:first-child, #colorQueue div:first-child { margin-left: 0; }
#colorSlots div.hovered { background: #aaa; }
#colorSlots div { border-style: dashed; }
#colorQueue div { background: #666; color: #fff; font-size: 50px; text-shadow: 0 0 3px #000; }
#colorQueue 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); } /**
* success message div
* position: absolute because it will be shown as popup
*/
#successMsg { 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; } /**
* error message div
*/
#errorMsg { 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, .5);
-webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .5); box-shadow: .3em .3em .5em rgba(0, 0, 0, .5); padding: 20px; color: red; height: 60px; width: 380px; margin: auto; margin-top: 10px; position: relative; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript"> var colorCount = 0; var TotalColors
= 7; $(document).ready( suffleColors ); function suffleColors() { // initially hide the success message box $('#successMsg').hide(); //initially hide the error message box $('#errorMsg').hide(); // Reset to default colorCount = 0; $('#colorQueue').html( '' ); $('#colorSlots').html( '' ); // Create the color queue with the color codes var colorCodes = [ 'ff0000', 'A52A2A', 'A52A2A', 'A52A2A', 'A52A2A', 'A52A2A', 'A52A2A' ]; colorCodes.sort( function() { return Math.random() - .5 } ); for ( var i = 0; i < TotalColors; i++ ) { $('<div style="background-color:'+ '#' + colorCodes[i]
+'"></div>').data( 'color', colorCodes[i] ).attr( 'id', colorCodes[i] ).appendTo( '#colorQueue' ).draggable( { containment: '#content', stack: '#colorQueue div', cursor: 'move', revert: true } ); } // Create the color slots with color codes and color names var tempColorCodes = [ 'A52A2A', 'ff0000', 'A52A2A', 'A52A2A', 'A52A2A', 'A52A2A', 'A52A2A' ]; var colors = [ 'Remove all jewellery', 'Wet hands thoroughly all over', 'Use pH neutral soap', 'Lather soap all over hands', 'Rub hands together vigorously for 15-20 seconds', 'Rinse hands under running water', 'Pat hands dry with paper towels' ]; for ( var i = 0; i < TotalColors; i++ ) { $('<div>' + colors[i] + '</div>').data( 'color', tempColorCodes[i] ).appendTo( '#colorSlots' ).droppable( { accept: '#colorQueue div', hoverClass: 'hovered', drop: handleColorDrop } ); } } function handleColorDrop( event, ui ) { var slotNumber = $(this).data( 'color' ); var colorNumber = ui.draggable.data( 'color' ); // If the color was dropped to the correct slot, // position it directly on top of the dashed slot // and prevent it being dragged again if ( slotNumber === colorNumber ) { //if dropped on correct slot then hide the error message box $('#errorMsg').hide(); //disable draggable ui.draggable.draggable( 'disable' ); //disable droppable $(this).droppable( 'disable' ); ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } ); ui.draggable.draggable( 'option', 'revert', false ); //track how many colors have been dropped on the slots colorCount++; } else { //show the error message if correct slot not selected for drop $('#errorMsg').show(); } // If all the colors have been placed correctly then display a message if ( colorCount == TotalColors ) { $('#successMsg').show(); $('#successMsg').animate( { left: '50%', top: '50%', margin: '-50px 0 0 -200px', width: '400px', height: '100px', opacity: 1 } ); } } </script> </head> <body> <div class="aboutBox"> <h1>Drag and Drop</h1> <h2>Put the below images in their appropriate positions</h2> </div> <div id="content"> <div id="colorQueue"> </div> <div id="colorSlots"> </div> <div id="errorMsg"> <h3>OOPs! Wrong selection. Please try again.</h3> </div> <div id="successMsg"> <h2>You made it!</h2> <button onclick="suffleColors()">Plot Again</button> </div> </div> </body> </html>
拖放/**
*为整个身体添加样式
* ------------------------
*每边边距10px
*每条线路的线路高度为1.8em
*/正文{边距：10px；字体系列：“Georgia”，衬线；线条高度：1.8em；颜色：#333；}/**
*标题字体系列
*/h1、h2、h3{字体系列：“Lucida Sans Unicode”，“Lucida Grande”，Sans serif；}/**
*放置颜色和空槽的主内容区
* ---------------------------------------------------------
*首先，我们从各个方面运用保证金，
*接下来我们用10px覆盖上边缘
*
*/
#内容{页边距：自动；页边距顶部：10px；文本对齐：居中；
-moz用户选择：无；
-webkit用户选择：无；}/**
*带边框的头消息
*/.aboutBox{清除：两个；文本对齐：居中；边距：自动；填充：10px；背景：#ebedf2；边框：1px实心#333；宽度：910px；}.aboutBox h1{字体重量：粗体；边距：5px；颜色：#666；字体大小：
1.5em；}/**
*空位
*/
#彩色插槽{边距：20px自动0自动；背景：#ddf；}/**
*颜色队列
*/
#colorQueue{边距：0自动；背景：#ffd；}
#colorSlots，#colorQueue{宽度：910px；高度：150px；填充：20px；边框：1px实心#333；
-moz边界半径：10px；
-webkit边界半径：10px；边界半径：10px；
-moz盒阴影：0.3emrgba（0,0,0,7）；
-webkit盒阴影：0.3EMRGBA（0,0,0,7）；盒阴影：0.3EMRGBA（0,0,0,7）；}
#colorSlots div，#colorQueue div{float:左；宽度：65px；高度：100px；填充：10px；填充顶部：40px；填充底部：0；边框：1px实心#333；
-moz边界半径：10px；
-webkit边框半径：10px；边框半径：10px；边距：0 10px；背景：#fff；}
#colorSlots div:first child，#colorQueue div:first child{margin left:0；}
#colorSlots分区悬停{背景：#aaa；}
#colorSlots div{边框样式：虚线；}
#colorQueue div{background:#666；color:#fff；字体大小：50px；文本阴影：0 0 3px#000；}
#colorQueue div.ui-draggable-draggable{
-moz盒阴影：0.5emrgba（0,0,0,8）；
-webkit盒阴影：0.5emRGBA（0,0,0,8）；盒阴影：0.5emRGBA（0,0,0,8）；}/**
*成功讯息组
*位置：绝对，因为它将显示为弹出窗口
*/
#successsg{位置：绝对；左侧：580px；顶部：250px；宽度：0；高度：0；z索引：100；背景：dfd；边框：2px实心#333；
-moz边界半径：10px；
-webkit边界半径：10px；边界半径：10px；
-moz盒阴影：.3em.3em.5em rgba（0,0,0,8）；
-webkit盒影：.3em.3em.5em rgba（0,0,0,8）；盒影：.3em.3em.5em rgba（0,0,0,8）；填充：20px；}/**
*错误消息div
*/
#errorMsg{background:#dfd；border:2px solid#333；
-moz边界半径：10px；
-webkit边界半径：10px；边界半径：10px；
-moz盒阴影：.3em.3em.5em rgba（0,0,0,5）；
-webkit方框阴影：.3em.3em.5em rgba（0,0,0,5）；方框阴影：.3em.3em.5em rgba（0,0,0,5）；填充：20px；颜色：红色；高度：60px；宽度：380px；边距：自动；边距顶部：10px；位置：相对；}var colorCount=0；var TotalColor
= 7; $（文件）。准备就绪（彩色）；函数suffleColors（）{//最初隐藏成功消息框$（'#successsg'）.hide（）；//最初隐藏错误消息框$（'#errorMsg'）.hide（）；//重置为默认颜色计数=0；$（'#colorQueue'）.html（'''）；$（'#colorSlots'）.html（'''）；//使用颜色代码var colorCodes=[ff0000'，A52A2A'，A52A2A'，A52A2A'，A52A2A'，A52A2A'，A52A2A'，A52A2A']；colorCodes.sort（函数（）{return Math.random（）-.5}）；for（变量i=0；i