加入.resizable到div ID

我在這裏找到了其他問題之一的代碼。這正是我正在尋找的（可拖動，它整齊地疊加在最後點擊哪一個div的基礎上）除了我還希望div id可以調整大小，但我不知道如何做到這一點，而不會弄亂代碼。加入.resizable到div ID

$(document).ready(function() { 
    var a = 3; 
    $('#box1,#box2,#box3,#box4').draggable({ 
     start: function(event, ui) { $(this).css("z-index", a++); } 
    }); 
    $('#dragZone div').click(function() { 
     $(this).addClass('top').removeClass('bottom'); 
     $(this).siblings().removeClass('top').addClass('bottom'); 
     $(this).css("z-index", a++); 

    }); 
});

來源

2012-05-07 user1379378

你可以用你試過的代碼添加一個jsfiddle嗎？所以我們可以看到它是如何混亂的？ – Bazzz

直接讓.resizable()和他們成爲可調整大小。

$('#box1,#box2,#box3,#box4').draggable({ 
    start: function(event, ui) { $(this).css("z-index", a++); } 
}).resizable();

你沒有看到它的原因：在jsFiddle中，jQuery UI包含在主題中。如果你檢查框，你可以看到，他們有ui-resizable類，也有調整大小它們內部處理，像這樣的：

<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; "></div>

，但它們不是在所有風格。它們是隱形的。如果你給他們尺寸，你將能夠拖動他們並調整框的大小。

這是一個simple demo，顯示我在說什麼。

這是我已經改變了的東西：

添加.ui-resizable-se { width: 20px; height: 20px; background: cyan; position: absolute; bottom: 0; right: 0; }的CSS，這將樣式的小號 outh- Ë AST處理程序。
加入.resizable()呼叫
改變了這種選擇：'#dragZone div'到'#dragZone > div'因此它不會弄亂的處理程序和僅適用於真正的盒子，而不是在該區域每一個DIV

來源

2012-05-07 09:37:43 kapa

太棒了，非常感謝。對不起現在打擾您另一個問題，但是，我現在如何將您創建的青色手柄變成默認的可調整大小的手柄？ – user1379378

@ user1379378您只需包含一個主題。或者，您可以轉到[手冊頁]（http://jqueryui.com/demos/ resizable /）並檢查/複製所需的CSS和圖像。 – kapa

加入.resizable到div ID

回答

相關問題