jquery ui draggable - 克隆不起作用

我使用的是jquery 1.8.3和jquery-ui-1.9.1。在下面的代码中，我有3个用户选择。根据他们的选择，显示5个图像。其中一个图像可以被拖入预览窗口。如果用户改变了他/她的想法，他们可以将另一图像拖到预览窗口上，这将替换第一个图像。现在不起作用的是使用“克隆”助手选项。如果我将图像拖到预览窗口上，它会完全消失。一旦我将“克隆”选项取出，图像就会下降，但我也希望它保持原来的位置。我已经检查了所有其他类似的问题，但没有一个适用于我。我已经在FF和IE最新版本中进行了测试。jquery ui draggable - 克隆不起作用

以下为代码显示3个选项的第一比特：

<div id="choices"> 
    <ul> 
     <li id="birthdaychoice"><a href="#">Birthday</a></li> 
     <li id="plainchoice"><a href="#">Plain</a></li> 
     <li id="flowerschoice"><a href="#">Flowers</a></li> 
    </ul> 
</div>

接下来是对每个选择的代码，显示正确的图像集。为了简洁起见，我只在下面列出了其中一个选项。

<div id="makeMeDraggable"> 
    <div id="birthday"> 
     <ul> 
      <li><img src="images/stationery/tooltips/christmastooltip.png" width="68" height="80" alt="Slide 1" /></li> 
      <li><img src="images/stationery/tooltips/eastertooltip.png" width="68" height="80" alt="Slide 2" /></li> 
      <li><img src="images/stationery/tooltips/footballtooltip.png" width="68" height="80" alt="Slide 3" /></li> 
     </ul> 
    </div>

喏，这就是JS代码：

$("#birthday li").draggable({ 
    helper: 'clone', 
    containment: '#preview', 
    cursor: 'move', 
    appendTo: 'body' 
}); 


$("#preview").droppable({ 
    accept: '.draggable', 
    activeClass: "custom-state-active", 
    drop: function(event, ui) { 
    $(this).append($(ui.draggable).clone()); 
      // $item.appendTo("#preview"); 
      // $(ui.draggable).attr('src','image/10.jpg'); 
    } 
     });

不知道如何解决这个问题？

来源

2013-07-24 Kathy L

尝试使用clone(true)来克隆具有数据和事件的元素。有关更多信息，另请参阅the API doc。

来源

2013-07-25 00:08:58

jquery ui draggable - 克隆不起作用

回答

相关问题