Comment créer un redimensionnable et le redimensionner en une fois? (en démarrant par programme le redimensionnement)

Question

J'essaye de créer un div redimensionnable à la position de souris et le redimensionner immédiatement à la taille désirée. Ma tentative a échoué jusqu'à présent:

http://jsfiddle.net/YKnfR/1/

Toutes les idées sur la façon d'obtenir ce comportement?

Answer 1

Ajouter à votre CSS ci-dessus votre # sélecteur block1:

#blocks > div 
{ 
    width: 200px; 
    height: 200px; 
} 

Pas besoin d'obtenir le script redimensionnable impliqué jusqu'à ce que vous voulez que l'utilisateur pour le redimensionner. Juste Pour votre information, que le CSS serait plus clair avec un sélecteur :not comme ceci:

#blocks > div:not(#block1) 
{ 
    width: 200px; 
    height: 200px; 
} 

mais IE ne supporte pas :not, et je ne sais pas à quel point il se dégrade. C'est pourquoi vous devez placer le premier exemple au-dessus de votre sélecteur # block1.

Answer 2

Il vous suffit d'ajouter la taille désirée et la largeur à l'aide heigth() et la largeur():

$(document).mousedown(function(e){ 
    var block = $('<div id="new">New</div>') 

    $('#blocks').append(block) 
    block.css('left', e.pageX).css('top', e.pageY).resizable() 

    block.height('40'); 
    block.width('40'); 
}) 

Vous pouvez placer ces paramètres à droite dans le css.