javascript - 使用 jquery 拖放图像

Question

我是 jquery 的新手，我正在尝试为 children 开发一款在特定区域使用拖放图像的游戏。它与此 url 中的纸牌游戏相同:http://www.elated.com/res/File/articles/development/javascript/jquery/drag-and-drop-with-jquery-your-essential-guide/card-game.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
        } );
      }

    }

源代码的完整描述在这里:http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/

我正在等待您的帮助，在此先感谢您

Answer 1

如果我没记错，那么你想设置你在游戏中使用的所有卡片的图像。

然后你只需要在 css 中设置所有卡片的背景图片 以卡片 1 为例，它的 id 是 card1 然后将它的 css 设置如下

#card1{
background-image:url("http://static3.bigstockphoto.com/thumbs/7/0/3/large2/30774275.jpg");
}