11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous !

EDIT : trouvé tout seul comme un grand, il fallait simplement imbriquer l'img draggable dans une div

http://jsfiddle.net/4c960xrn/

J'essaie de créer une sorte de patchwork interactif réalisable grâce à des petites images draggables :

upload/52659-Patchwork1.png

Or, les petites images, lorsqu'elles sont droppées dans n'importe quel carré gris, se voient dotées d'une nouvelle classe qui sert à les redimensionner à la taille du fameux carré.

Mon problème est que lorsque la vignette change de taille, sa zone de départ change de taille aussi, créant un espace plus grand qui décale tout, et fait complètement foirer mon jeu.

upload/52659-Patchwork2.png

Auriez-vous une idée sur le moyen de prévenir l'espace de départ, afin que rien n'y soit décalé? Ou alors une toute autre solution à laquelle je n'ai pas pensée (je débute en javascript, j'ai pas du tout la logique encore)

Je vous pose le code, et merci beaucoup pour les éventuelles réponses !

Le javascript :

$(document).ready(function() {
	var numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ,11 ,12 ,13 ,14 ,15 ,16 ,17 ,18 ,19 ,20 ,21 ,22 ,23 ,24 ,25 ,26 ,27 ,28 ,29 ,30 ];
	
  for ( var i=0; i<30; i++ ) {
    $('<div>' +
	'<img src="../css/img/patchwork/' + numbers[i]+ '.svg" />' +
	 '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
      containment: '.section2',
      stack: '#cardPile div',
      cursor: '-webkit-grab',
      revert: false
    } )
  }


  
  for ( var i=1; i<=30; i++ ) {
    $('<div>' + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
      accept: '#cardPile div',
      hoverClass: 'hovered',
	  drop: handleCardDrop
	  

    } ).css({
		'display': 'inline-block',
		'width': '213px',
		'height': '213px',
		'background': '#dfe0d8',
		'margin': '15px'
		});
  }
  

function handleCardDrop( event, ui ) {

    ui.draggable.addClass( 'correct' );

    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );


}});
[/i][/i][/i]
Modifié par hurlemort (10 Jul 2015 - 13:41)