需要隱藏後初始div

我設法讓一個div在另一個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/

來源

2014-01-30 user1267980

你只需要一個div？ –

Jsut給了div一個id，然後在drop事件中刪除它http://jsfiddle.net/2rxC4/8/ –

給你的初始圖像的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

Ofcourse，如果你不想重新顯示圖像當您從可拖動DIV刪除它，只需調用隱藏「initialDragImg」的div，而不是將其刪除：

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

UPDATE：

上的新變化之後，支持多張圖片：

添加以下到滴功能：

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

這增加了被丟棄的DIV存在於可拖動區域克隆的ID。這將允許我們找到我們隱藏的原始div，以便在我們移除圖像時重新顯示。

接下來，添加以下到雙擊功能，重新顯示原始圖像到一邊：

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

此發現使用圖像的「originalid」屬性原來的div我們只是雙點擊。

有關工作解決方案，請參閱更新的JSFiddle。

來源

2014-01-30 10:30:23 RobF

JSFiddle已更新http://jsfiddle.net/2rxC4/15/ – user1267980

所以我介紹了第二個圖像，因爲這個應用程序的實際使用可能有多達20個不同的圖像，我需要拖動。在JavaScript中，我如何檢測哪個圖像的ID已被拖動？我知道如何解析舊的js中的值，但不知道如何使用jquery來完成。最新的JSFiddle在這裏：http://jsfiddle.net/2rxC4/17/ – user1267980

更新的答案:)無論你添加多少圖片都應該工作。 – RobF

取出的輔助方法，

$(".dragImg").draggable({ 

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

來源

2014-01-30 10:32:43

你需要在這裏

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

這條線從clone助手更改爲original

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

，然後編輯到

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

來源

2014-01-30 10:51:46 aelor

需要隱藏後初始div

回答

相關問題