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

})

编辑：Hiya，如果您查看Draggable和Droppable文档页面的概述页面，您会看到该插件为您定义了额外的变量（实际上它们是jQuery对象）：“ ui.draggable“是选定的可拖动元素＆amp; “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
  }
 });

jquery draggable / droppable问题

1 个答案: