Passing image thumbnail and related text to droppable JQuery UI

Question

I have a php loop which fetches products from database. each product containing an image and text.

I made them draggable using jQuery UI . I have 2 boxes underneath the products list 1st box (.dragMedia) is where I drop my products, second box (#sequenceContainer)is where products should appear with their own thumbnail and text.

I don't know how to pass the image and text so that it appears in the second box. I managed to pass the text, but when I add the "image" it does not work.

PHP and HTML:

 foreach($images as $image) {
                    echo '<div class="businessProdContainer mediaToDrop">
                                <div class="mediaContainer">

                    <span class="mediaDesc">Ipsum lorem blah blah blah</span>
                    <a class="removeItem" href=""></a>
                        <img src="'.$image.'" width="160" height="140" alt="Media"/><br />
                        <div class="statisticsElements">
                            <span>Views</span>&nbsp;&nbsp;<span class="statsViews">1342</span>
                            <br>
                            <span>Likes</span>&nbsp;&nbsp;<span class="statsLikes">106</span>
                            <br>
                            <span><a href="demo-cart.php" >Product info</a></span>
                            <br>


                            <a class="campaignEditorBtn" href="#" id=""></a>
                            <a class="statisticsBtn" href="#" id=""></a>
                            <a class="mediaEditorBtn" href="#" id=""></a>

                        </div>
                        <br>
                                <p class="businessProdFooter">
                                    Submission date:  2013/10/29

                                    <br>
                                    Campaign end date:  12/12
                                    <br>


                                </p>
                        </div>

                    </div>';


                 }

Js:

  var $count= 0;
  var $limit = 5;

 $(function() {

$( ".mediaToDrop" ).draggable({
    cancel: "a.ui-icon", 
  revert: "invalid", 
   appendTo: "body",
  containment: "document",
  helper: "clone",
  cursor: "move"



    });

        $( ".dragMedia" ).droppable({

                      drop: function( event, ui ) {
                          var src = $(event.target).attr( "href" );
                              $count++;
                     if($count == $limit){
                         alert('Maximum of 4 media items!');
                            $(this).droppable("disable");
                         }else{ 

                            $( this )

                              .addClass("highlightDroped")
                              .find( "p" )
                                    .html( $count +" video added" );
                                $( "<li></li>" ).text( ui.draggable.text() ).appendTo($('#sequenceContainer') );


                            }

                      }

        });


  });

Any help will be appreciated

Mike

Answer 1

Never after a further delving I found what was missing.

   ui.draggable.find('img').attr('src');

Create an image element on the fly and passed the src attribute from the dragged element.