在追加元素的同時保持js

我不是超級經驗豐富的，希望有人能給我一些提示。在追加元素的同時保持js

我試圖創建一個系統，圖像可以從一個容器轉移到一個可以重新調整大小和拖動的操作容器。

我有操縱在這裏：Fiddle Demo

，我試圖讓「單擊/雙擊淘汰制」在這裏工作：Fiddle Demo

<div class="frame"></div> 

<div class="inventory"> 
    <images> 
</div> 


$(".frame img") 
    .draggable({ 
    containment: "parent", 
    cursor: "move" 
}).resizable({ 
    aspectRatio:1, 
    containment: "parent", 
    minHeight: 50, 
    minWidth: 50 
}); 


$('.inventory img').click(function(){ 
    $(this).appendTo(".frame"); 
}); 
$('.frame img').dblclick(function(){ 
    $(this).appendTo(".inventory"); 
    $(this).removeClass('added'); 

});

我認爲主要的問題是，一旦我追加divs，js就不會根據元素的排列進行更新和應用。

任何幫助將不勝感激！

謝謝！

來源

2014-01-29 Scryeur

我更新了Arun P Johny的小提琴：http://jsfiddle.net/u4xKW/2/。

$(".frame img") 
    .draggable({ 
    containment: "parent", 
    cursor: "move" 
}).resizable({ 
    aspectRatio: 1, 
    containment: "parent", 
    minHeight: 50, 
    minWidth: 50 
}); 

$('.inventory').on('click', 'img', function() { 
    $(this).resizable({ 
     aspectRatio: 1, 
     containment: "parent", 
     minHeight: 50, 
     minWidth: 50 
    }); 

    $(this).parent().appendTo(".frame").draggable({ 
     containment: "parent", 
     cursor: "move" 
    }); 
}); 

$('.frame').on('dblclick', '.ui-draggable', function() { 
    $(this).appendTo(".inventory"); 
    $(this).draggable("destroy"); 
    $("img", this).resizable("destroy"); 
});

添加和刪除項目中的可拖動和可調整大小的功能時，它們被添加和刪除。

來源

2014-01-29 06:51:48 Steve

謝謝！如果沒有太多的麻煩，我想讓它做更多的事情。在這裏看：http://jsfiddle.net/Thaikhan/VuyS4/1/。我希望當圖像被恢復到黃色框架時，它們會恢復爲.inventory img {}中規定的尺寸，呈現阻擋位置，並且不會重疊。有任何想法嗎？ – Scryeur

是的，我可能會使用[jQuery的.data（）]（http://api.jquery.com/data/）函數存儲對象的維度，並在雙擊對象時檢索/使用它們。 – Steve

由於您沒有使用內聯樣式，我們可以刪除通過調整大小和拖動功能添加的樣式屬性。這是更新的小提琴：[http://jsfiddle.net/VuyS4/2/](http://jsfiddle.net/VuyS4/2/）代碼更改：.removeAttr（「style」） – Steve

因爲選擇的評估必須是動態的，你需要使用事件代表團

$('.inventory').on('click', 'img', function() { 
    $(this).appendTo(".frame"); 
}); 
$('.frame').on('dblclick', 'img', function() { 
    $(this).appendTo(".inventory"); 
    $(this).removeClass('added'); 
});

演示：Fiddle

注：這不會處理可調整大小的/可拖動的行爲 - 你需要在將元素從一個容器移動到另一個容器時手動銷燬/添加此行爲

來源

2014-01-29 05:51:32

太棒了！謝謝！你知道我怎樣才能讓他們可以操縱，而他們在.frame？ – Scryeur

@Scryeur你想操作的屬性 –

與第一個鏈接類似，我希望能夠在圖像下面移動和調整圖像大小。 – Scryeur

在追加元素的同時保持js

回答

相關問題