Question

我设法让div在另一个div的范围内掉落，然后让它变得可拖动。然而，最初的div仍然存在。我该如何隐藏或删除它？

HTML：

<html><body>
<div class="dragImg">
<img src="http://i.dailymail.co.uk/i/pix/2008/06/04/article-0-0179864B00000578-284_224x423.jpg" width="50" height="94" class="img"></div>
</div>
<div id="dropHere"></div>
</body></html>

JS：

<script type="text/javascript">

$(function(){  
 //Make every clone image unique.   

var counts = [0];
    var resizeOpts = { 
      handles: "none" ,autoHide:true
    };    
   $(".dragImg").draggable({
                         helper: "clone",
                         //Create counter
                         start: function() { counts[0]++; }
                        });

$("#dropHere").droppable({
       drop: function(e, ui){
               if(ui.draggable.hasClass("dragImg")) {
     $(this).append($(ui.helper).clone());
   //Pointing to the dragImg class in dropHere and add new class.
         $("#dropHere .dragImg").addClass("item-"+counts[0]);
            $("#dropHere .img").addClass("imgSize-"+counts[0]);

   //Remove the current class (ui-draggable and dragImg)
         $("#dropHere .item-"+counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging");

$(".item-"+counts[0]).dblclick(function() {
$(this).remove();
});     
    make_draggable($(".item-"+counts[0])); 
      $(".imgSize-"+counts[0]).resizable(resizeOpts);     
       }

       }
      });

var zIndex = 0;
function make_draggable(elements)
{   
    elements.draggable({
        containment:'parent',
        start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
        stop:function(e,ui){
        }
    });

}


});

</script>

这是我的完整代码和演示的JFiddle：http://jsfiddle.net/2rxC4/6/

Answer 1

给你的初始图像div一个ID，例如“initialDragImg”：

<html><body>
<div class="dragImg" id="initialDragImg">
<img src="http://i.dailymail.co.uk/i/pix/2008/06/04/article-0-0179864B00000578-    284_224x423.jpg" width="50" height="94" class="img"></div>
</div>
<div id="dropHere"></div>
</body></html>

然后在你的JQuery中，当你将图像放入可拖动区域时，请使用：

$("#initialDragImg").hide();

双击以从可拖动区域中删除图像时，如果需要，可以再次显示初始图像：

$("#dragImgInitial").show();

进入从可拖动div中删除图像的代码。

JSFiddle

当然，如果您不想在从可拖动的div中删除图像时重新显示图像，只需更改调用以隐藏“initialDragImg”div，然后将其删除：

$("#initialDragImg").remove();

<强>更新

继续进行新的更改以支持多张图片：

将以下内容添加到drop函数中：

$("#dropHere .dragImg").attr("originalid", ui.draggable.eq(0).attr("id"));

这会将已删除div的ID添加到可拖动区域中存在的克隆中。这将允许我们找到我们隐藏的原始div，以便在我们删除图像时重新显示。

接下来，将以下内容添加到双击功能中，以便将原始图像重新显示在旁边：

$("#" + $(this).attr("originalid")).show();

这会在我们双击的图像上使用“originalid”属性找到原始div。

有关正常工作的解决方案，请参阅更新的JSFiddle。

Answer 2

删除辅助方法，

   $(".dragImg").draggable({

                     //Create counter
                     start: function() { counts[0]++; }
                    });

Answer 3

您需要将帮助器从clone更改为original

$(".dragImg").draggable({
                         helper: "original",
                         //Create counter
                         start: function() { counts[0]++; }
                        });

然后在此处编辑此行

$(this).append($(ui.helper).clone());

到

$(this).append($(ui.helper));

丢弃后需要隐藏初始div

3 个答案: