php - 画像のサムネイルと関連テキストをドロップ可能な JQuery UI に渡す

Question

データベースから製品を取得するphpループがあります。画像とテキストを含む各製品。

jQuery UI を使用してドラッグ可能にしました。製品リストの下に 2 つのボックスがあります。最初のボックス (.dragMedia) は製品をドロップする場所で、2 番目のボックス (#sequenceContainer) は製品が独自のサムネイルとテキストと共に表示される場所です。

2 番目のボックスに表示されるように画像とテキストを渡す方法がわかりません。なんとかテキストを渡すことができましたが、「画像」を追加すると機能しません。

PHP と 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>';


                 }

J:

  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') );


                            }

                      }

        });


  });

どんな助けでも大歓迎です

マイク