Drag Dynamic Image

Demonstrates creating a dynamic image and dropping it.

by Juan Alban Franco

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/>
<!--<div id='drop' class='drop' >Drop Here</div>!-->
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>

JavaScript

//$ (init);

$('#deal').click(function () {
    dealCard();
     $('#drop').html( 'Drop Here' );
});
var ran;
var cardIndices = new Array();
var cardPix = new Array();
var cardNames = new Array();
var numberOfCardsInDeck;
var currentIndex;
var str;
var index = 0;
function init() {
  $('.drop').droppable( {
    drop: handleDropEvent
  } );   
}
//alert("creating indices");
for( var i = 0; i < 52; i++)
{
  cardIndices[i] = i;
  createString(i);
  
}
//alert("creating deck");

for( var i = 1; i <= 13; i++)
{
  cardPix[i-1] = 'http://cop4813.000webhostapp.com/cards/'+ i +'_of_clubs.png';
  cardPix[i+12] = 'http://cop4813.000webhostapp.com/cards/'+ i +'_of_diamonds.png';
  cardPix[i+25] = 'http://cop4813.000webhostapp.com/cards/'+ i +'_of_hearts.png';
  cardPix[i+38] = 'http://cop4813.000webhostapp.com/cards/'+ i +'_of_spades.png';
}
numberOfCardsInDeck = cardIndices.length;
//alert(numberOfCardsInDeck);

//var cardname = 'jack_of_diamonds';
//var link =  'http://cop4813.000webhostapp.com/cards/'+cardname + '.png';
function dealCard() {
		 if (numberOfCardsInDeck == 0) return false;
    var img = document.createElement("img");
    ran = Math.floor(Math.random() * numberOfCardsInDeck) ;
    currentIndex = cardIndices[ran];
    img.src = cardPix[currentIndex] ;
    
    // link;
  //  'https://cop4813eaglin.pbworks.com/f/AceHearts.png';
    img.id = ''+currentIndex;    
    img.height = 160;
    img.width = 100;
    document.body.appendChild(img);
    $('#'+img.id).draggable();
    removeIndex(ran);
    //alert(numberOfCardsInDeck);

   //  alert("new card at that spot "+cardPix[cardIndices[ran]]);
    
}
function removeIndex(c)
{
    //    alert(numberOfCardsInDeck + "       "+c);
   // alert("card to remove "+cardPix[cardIndices[c]]);    

    // simply make every higher numbered card move down 1
    for (var j=c; j <= numberOfCardsInDeck - 2; j++)
    {
      //  alert(j);
        cardIndices[j] = cardIndices[j+1];
        

    }
    numberOfCardsInDeck--;
 //...