Question

当可拖动项目的帮助属性为“克隆”时，然后在删除时，它不起作用。检查下面的示例代码：

    <div  id="clonedDraggableItem" <img src="img\select.png"/></div>
    <div  id="originalDraggableItem" <img src="img\select.png"/></div>

<div id="droppableWorkArea" style="border:1px solid gray; height:475px;width:100px"></div>

<script type="text/javascript">
    $(function () {
        $("#clonedDraggableItem").draggable({opacity: 0.7,helper: "clone"});   
        $("#originalDraggableItem").draggable({opacity: 0.7, helper: "original" });    

        $("#droppableWorkArea").droppable({
            drop: function () {
            }
        });
    });

但正如你所看到的，另一个未克隆的项目，而是它的“帮助”属性设置为“原始”，然后它可以工作。此外，可以在droppable div上移动已删除的项目。

请注意：我希望可拖动的项目（带有“clone”propery）不仅可以被删除，而且还可以移动到可放置的div。

Answer 1

这是一种方法。

$( "#draggable" ).draggable({
            helper : "clone"
});
$( "body" ).droppable({
    drop: function( event, ui ) {
        $(ui.helper).removeClass('ui-draggable-dragging');
        var newDiv = $(ui.helper).clone().removeClass('ui-draggable-dragging');
        $(this).append(newDiv);
  }  
});

以下示例来自我回答的另一个类似问题。

http://jsfiddle.net/Jje3H/

如果你想让后续的克隆可以拖动，那么看看这个例子。

http://jsfiddle.net/Jje3H/1/

或者，如果您只是希望能够移动后续克隆，那么：

http://jsfiddle.net/Jje3H/2/

如果将帮助程序选项设置为＆＃34; clone＆＃34;则jQuery UI，拖放功能无法正常运行

1 个答案: