jquery draggable/droppable issue

Question

嘿傢伙我有一個拖放功能，不完全工作。我想要做的就是能夠將圖片拖放到div中，並將該圖片彈出到div中。我現在有一張2張圖片的列表，所以我爲每張圖片回顯以下功能。這兩張圖片都是可拖放的，但是第一張是唯一出現在div中的圖片，無論哪張圖片被拖入。我不確定是什麼錯誤，因爲jquery函數似乎對每張圖片都是唯一的。如果任何人有任何建議，我將非常感激。

while ($row = mysql_fetch_assoc($query)) { 

$image=htmlentities($row['image']); //image name 

$uniqid=uniqid(); //unique id for jquery functions 

$dirname = "usercontent/$user/images/$image"; 

echo "<img id=\"$uniqid\" src=\"$dirname\" width=\"75\" height=\"75\"/>"; 

echo "<script> 
$(function() { 
$(\"#$uniqid\").draggable({ scroll: true, scrollSensitivity: 10, scrollSpeed: 10, revert: true, helper: 'clone', cursorAt: { cursor: 'move', top: 27, left: 27 } }); 
$(\"#droppable2, #droppable-background , #droppable2-innerer\").droppable({ 
      greedy: true, 
      activeClass: 'ui-state-hover', 
      hoverClass: 'ui-state-active', 
      drop: function(event, ui) { 
       $(this).addClass('ui-state-highlight').find('> p').html('Dropped!'); 
       $('#droppable-background').css(\"background-image\",\"url($dirname)\"); 
      } 
     }); 
}); 
</script>"; 

} 

Answer 1

不要用ID來建立一個可拖動的項目，最好是隻使用一個類，你可以把所有的人。從上面的代碼看來，您使用的是單個ID，也許這就是爲什麼只有一張圖片可以工作？你是否設置了3個拖放區域？

我設置了一個working demo，我添加了一堆評論，以幫助您瞭解如何完成此操作。

CSS

#draggable { width: 250px; height: 500px; padding: 0.5em; float: left; margin: 10px; background: #ddd; } 
#droppable { width: 250px; height: 500px; padding: 0.5em; float: left; margin: 10px; background: #ccc; } 
.dragme { background: #999; text-align: center; width: 100px; padding: 5px; } 
.fade { opacity: 0.3 } 
.ui-state-highlight { border: #333 1px solid; } 

HTML

<div class="demo"> 

    <div id="draggable" class="ui-widget-content"> 
     <p>Drag from here</p> 
     <div class="dragme"><img src="image1.gif"><br><span class="caption">Drag me to my target</span></div> 
     <div class="dragme"><img src="image2.gif" height="100"><br><span class="caption">Drag me to my target</span></div> 
    </div> 

    <div id="droppable"> 
     <p>Drop here</p> 
    </div> 

</div> 

腳本

$(document).ready(function(){ 

// set up the draggable items 
$(".dragme").draggable({ 
    helper : 'clone',     // you will drag a copy of the item around 
    revert : true,     // draggable returns home if released 
    start: function(e,ui){ 
    $(this).addClass('fade');  // fade out original item while dragging the clone 
    ui.helper.find('.caption').text("I'm being dragged!"); // message in clone 
    }, 
    stop: function(e,ui){ 
    $(this).removeClass('fade');  // remove fade if dragged item is released 
    } 
}); 

$("#droppable").droppable({ 
    drop: function(e, ui) { 
    $(this).addClass('ui-state-highlight');   // add drop box highlight (border) 
    ui.draggable.appendTo($(this)).removeClass('fade') // move item to drop box & un-fade 
    .find('.caption').text("I've been dropped");  // change caption 
    ui.helper.remove();        // remove clone 
    } 
}); 

}) 

---

編輯：你好，如果你看一下Draggable和Droppable的概述頁面文檔頁面，您將看到該插件爲您定義了額外的變量（實際上它們是jQuery對象）：「ui.draggable」是選定的可拖動元素&「ui.helper」是對象的克隆。

我已經更新了demo與你所要求的..它現在應該將圖像作爲投箱的背景。這裏只是腳本的更新部分：

$("#droppable").droppable({ 
    drop: function(e, ui) { 
    $(this).addClass('ui-state-highlight');   // add drop box highlight (border) 
    var src = ui.draggable.find('img').attr('src'); // get img URL 
    $('#droppable') 
     .css({ 
      backgroundImage : 'url(' + src + ')', // set background image 
      backgroundPosition : 'center center',  // position background image 
      backgroundRepeat : 'no-repeat'   // don't repeat image 
     }); 
    ui.helper.remove();        // remove clone 
    } 
});