0

我有一个从数据库中获取产品的 php 循环。每个产品都包含一个图像和文本。

我使用 jQuery UI 使它们可拖动。我在产品列表下方有 2 个框，第一个框 (.dragMedia) 是我放置产品的位置，第二个框 (#sequenceContainer) 是产品应该出现的位置，并带有自己的缩略图和文本。

我不知道如何传递图像和文本以使其出现在第二个框中。我设法传递了文本，但是当我添加“图像”时它不起作用。

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


                 }

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


                            }

                      }

        });


  });

任何帮助将不胜感激

麦克风

4

1 回答 1

0

在进一步研究之后，我再也没有发现丢失的东西。

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

动态创建一个图像元素并从拖动的元素传递 src 属性。

于 2013-12-18T17:06:55.593 回答