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;
}
img{

   width: 80px;

   height: 120px;

}

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/" + ('id') + ".png";
    img.id = 'AceOfHearts';
    document.body.appendChild(img);
    
    $('#AceOfHearts').draggable();
}

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