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