0

我正在使用 jquery 1.8.3 和 jquery-ui-1.9.1。在下面的代码中，我为用户提供了 3 个选择。根据他们的选择，将显示 5 张图像。然后可以将这些图像之一拖到预览窗口中。如果用户改变主意，他们可以将另一个图像拖到预览窗口中，这将替换第一个图像。现在不起作用的是使用“克隆”帮助程序选项。如果我将图像拖到预览窗口上，它会完全消失。一旦我去掉“克隆”选项，图像就会很好地下降，但我也希望它保持在原来的位置。我已经检查了板上所有其他类似的问题，但没有一个对我有用。我已经在 FF 和 IE 最新版本中进行了测试。

这是显示 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');
    }
        });

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

4

1 回答 1

0

尝试使用clone(true)数据和事件来克隆元素。另请参阅API 文档以获取更多信息。

于 2013-07-25T00:08:58.137 回答