Question

我正在使用jquery 1.8.3和jquery-ui-1.9.1。在下面的代码中，我有3个用户选择。根据他们的选择，显示5张图像。然后可以将其中一个图像拖入预览窗口。如果用户改变了主意，他们可以将另一个图像拖到预览窗口上，这将替换第一个图像。现在不起作用的是使用“clone”帮助程序选项。如果我将图像拖到预览窗口上，它会完全消失。一旦我拿出“克隆”选项，图像会很好地下降，但我也希望它保持原来的位置。我已经检查了董事会上所有其他类似的问题，但没有一个对我有用。我已经在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');
    }
        });

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

Answer 1

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

jquery ui draggable - 克隆不起作用

1 个答案: