Drag Dynamic Image

Demonstrates creating a dynamic image and dropping it.

by Shawn Lackey

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<input type="button" value="Deal Card" id="deal" />
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id='drop' class='drop'>Drop Here</div>

CSS

.drop {
    float: left;
    width: 400px;
    height: 200px;
    background-color: #BC5347;
}

JavaScript

$ (init);

$('#deal').click(function () {
    dealCard();
});

function init() {
  $('.drop').droppable( {
    drop: handleDropEvent
  } );   
}

function dealCard() {
    var img = document.createElement("img");
    img.src = 'https://lackeyinnovations.azurewebsites.net/.Cards/ace_of_spades2.png';
    img.id = 'ace_of_spades2';
    document.body.appendChild(img);
    
    $('#ace_of_spades2').draggable();
}

function handleDropEvent( event, ui ) {
  var draggable = ui.draggable;
  $('#drop').html( 'The card with ID "' + draggable.attr('id') + '" was dropped onto me!' );
    
}