有没有办法用图像替换可拖动/可投放的卡？ 大部分代码来自我在互联网上从博客中找到的一个例子，允许重复使用，但这正是我需要完成一项任务的原因。需要帮助才能在截止日期之前完成这一工作。大约一周之后。
<!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>