创建在背景中具有视频或图像的可放置对象

Question

我正在尝试创建一个应用程序，使用拖放操作来回答问题。我已经成功创建了简单的拖放，但是我需要成为可拖放div，将在背景上放置图像或视频，然后放置可拖动div。我正在从jquery生成可拖动和可拖放的div。我试过不走运。

下面是jquery代码

$(window).load(function(){
var correctCards = 0;
$(init);
function init(){
  // Reset the game
  correctCards = 0;
  totalDrags   = 0;
  $('#cardPile').html( '' );
  $('#cardSlots').html( '' );

  // Create the pile of shuffled cards
  var numbers = <?php echo $var ?>;
  var terms =   <?php echo $terms ?>;

  totalQuestions = numbers.length;

  for ( var i=0; i<= (numbers.length-1); i++ ) {
    $('<div>' + terms[i] + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
      stack: '#cardPile div',
      cursor: 'move',
      revert: true
    });
  }

  // Create the card slots
  var words = [];
  for(var i = 1; i<= (numbers.length); i++ ){
    words.push(i);
  }

  for ( var i=1; i <= words.length; i++ ) {
    $('<div>' + words[i-1] + '</div>').
        data( 'number', i ).
        appendTo( '#cardSlots' ).
        droppable({
            accept: '#cardPile div',
            hoverClass: 'hovered',
            drop: handleCardDrop,
            out:outFromDraggable
        })
  }

    $( "div.ui-draggable" ).draggable({
        containment: "div.dragParent"
    });
}

function outFromDraggable(event, ui){
    ui.draggable.removeClass('dropped');
    ui.draggable.removeClass('correct');
}

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');
    correctCards++;
  }else{

  } 
  ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
  ui.draggable.draggable( 'option', 'revert', false );
  ui.draggable.addClass('dropped');

  var totalDropped = $('.dropped').length;
  var totalCorrect = $('.correct').length;

  if(totalQuestions == totalDropped){
        if(totalDropped == totalCorrect){
            var html = 'Good!</br><a class="" href="word-order.php?questionType=<?php echo $questionType ?>&pageNo=<?php echo $nextPageNo; ?>">Next <img src="images/next_btn.png" alt="" /></a>';
            $('div.exrResult').html(html);
        }else{
            $('div.exrResult').html('Incorrect!</br>:-(');
        }
        $('div.exrResult').show();
  }else if(totalDropped < totalQuestions){
    $('div.exrResult').hide();
  }else{
    $('div.exrResult').hide();
  }
}

}）;