Php jquery可拖放问题

嘿，伙计们，我有一个拖放功能，不能完全工作。我想做的是能够将图片拖放到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>";

}

while（$row=mysql\u fetch\u assoc（$query））{
$image=htmlentities（$row['image']）；//图像名称
$uniqid=uniqid（）；//jquery函数的唯一id
$dirname=“usercontent/$user/images/$image”；
回声“；
回声“
$（函数（）{
$（\“\\$uniqid\”）.draggable（{scroll:true，scrollSensitivity:10，scrollSpeed:10，revert:true，helper:'clone'，cursorAt:{cursor:'move'，top:27，left:27}）；
$（\“\”可拖放2，\”可拖放背景，\”可拖放2内部\“）。可拖放({
贪婪：没错，
activeClass:“ui状态悬停”，
hoverClass:“ui状态处于活动状态”，
drop：函数（事件、用户界面）{
$（this.addClass（'ui-state-highlight'）.find（'>p'）.html（'droped！'）；
$（'droppable background'）.css（\“background image\”，\“url（$dirname）\”）；
}
});
});
";
}

不要使用ID设置可拖动的项，最好只使用一个可以放在所有项上的类。从上面的代码可以看出，您使用的是一个ID，也许这就是为什么只有一张图片有效？你要设置3个降落区吗

我建立了一个网站，并添加了一堆评论，以帮助您了解如何做到这一点

CSS

HTML

---

编辑：您好，如果您查看和文档页面的概述页面，您将看到插件为您定义了额外的变量（实际上它们是jQuery对象）：“ui.draggable”是所选的draggable元素，“ui.helper”是对象的克隆

我已经按照您的要求更新了。。它现在应该将图像作为下拉框的背景。以下是脚本的更新部分：

 $("#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
  }
 });

---

福吉，真是一个伟大的屈服，我真的很感激。这真的帮助了我。我只有两个问题。1.我想做的是，当照片拖到盒子上时，它会成为整个盒子的背景，而盒子中当前的照片（如果有）会返回到起始位置，因此在您的示例中，盒子中始终会有一张照片，而起始位置会有一张照片，因为有两张照片。2.为什么要使用ui.draggable或ui.helper之类的变量？我知道它们代表什么，但它们是如何定义的，它们并不像我习惯看到的那样被声明。再次感谢福吉·斯卡法斯！我很高兴能帮上忙。我也为你更新了我的答案：）再次谢谢你，福吉，还有一个问题，哈哈，我讨厌一直问你，因为你帮了我这么大的忙，但我真的没有其他人可以跟我说话。问题：是否可以为多个可拖放div执行单独的事件，而无需多次重复整个可拖放函数？例如，如果你把图片拖到一个背景改变的div中，如果你把图片拖到另一个背景改变的div中。ps我把你的一堆东西投了个高票lol，我不知道还有什么其他方法来回报这么广泛和有用的回答lol。嗨，谢谢！英雄联盟我再次更新了演示（），基本上我所做的就是将可拖放ID更改为类，并将drop函数从以ID为目标更改为

$（this）

。

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

})

 $("#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
  }
 });