jquery-ui draggable: changement de marge css aide clone correctement

Question

J'ai un problème avec la mise en propriété de marge de l'aide css cloné élément div.

Il y a trois cadres dans l'exemple suivant: cadre vert est le stockage des éléments déplacés vers, cadre bleu pour laisser tomber, cadre rouge limite la place pour glisser. Je voudrais placer des éléments au milieu du cadre vert mais permettre à l'élément déplacé de se déplacer dans le cadre rouge près de toutes les bordures.

Donc tous les éléments dans le cadre vert ont une marge css: 8px auto, pour l'assistant cloné, j'essaie de changer la marge à 0 avec ui.helper.css ('margin', '0'). Le problème est que l'élément déplacé ne veut pas se déplacer dans le coin inférieur droit du cadre rouge.

Vous pouvez trouver jsfiddle project here

HTML:

<div id="main-container"> 
<div id="stock"> 
<div class="block">drag me to the right bottom corner of the red border</div> 
</div> 
<div id="workspace"> 
</div> 
</div> 

CSS:

#main-container { 
position: absolute; 
top: 20px; 
left: 20px; 
bottom: 20px; 
right: 20px; 
border: 2px solid #ff0000; 
} 

#stock { 
position: absolute; 
top: 5px; 
left: 5px; 
bottom: 5px; 
width: 180px; 
border: 2px solid #00ff00; 
} 

#workspace { 
position: absolute; 
top: 5px; 
left: 185px; 
bottom: 5px; 
right: 5px; 
border: 2px solid #0000ff; 
} 

.block { 
height: 100px; 
width: 150px; 
border: 1px solid #2e6f9a; 
position: relative; 
box-shadow: 2px 2px 19px #e0e0e0; 
border-radius: 8px; 
opacity: 0.8; 
filter: alpha(opacity=80); 
background-color: white; 
text-align: center; 
font-weight: bold; 
transition: background-color 0.25s ease-in; 

margin: 8px auto; 
} 

JavaScript:

$('.block').draggable({ 
appendTo: '#main-container', 
containment: $('#main-container'), 
helper: 'clone', 
cursor: 'move', 
revertDuration: 100, 
revert: 'invalid', 
start: function(ev, ui) { 
    ui.helper.css('margin', '0'); 
    ui.helper.css('background-color', 'red'); 
} 
}); 

$('#workspace').droppable({ 
accept: '.block', 
tolerance: 'fit' 
}); 

Answer 1

Je pense que le problème est dans le jquery-ui lui-même. ui.helper.css('margin', '0') fait son travail, mais ce n'est absolument pas suffisant, car jquery-ui détermine incorrectement la position du pointeur de la souris sur l'assistant cloné lors de sa création.

La solution n'est pas trivial mais il fonctionne. d'abord supprimer margin: 8px auto; du css .block et créer une nouvelle classe de style

.margin_8px_auto { 
    margin: 8px auto; 
} 

Deuxième ajouter ce style à l'élément avec un style .block

<div class="block margin_8px_auto">drag me to the right bottom corner of the red border</div> 

Enfin, modifiez le code javascript comme suit:

$('.block').draggable({ 
    appendTo: '#main-container', 
    containment: $('#main-container'), 
    helper: 'clone', 
    cursor: 'move', 
    revertDuration: 100, 
    revert: 'invalid', 
    helper: function(ev, ui) { 
     var $elem = $(this); 
     var pos = $elem.offset(); 
     var dX = ev.pageX - pos.left; 
     var dY = ev.pageY - pos.top; 

     $elem.removeClass('margin_8px_auto'); 
     $clone = $elem.clone(); 

     $(this).draggable("option", "cursorAt", { 
      left: dX, 
      top: dY 
     }); 

     return $clone; 
    }, 
    start: function(event, ui) { 
     ui.helper.css('background-color', 'red'); 
     $(this).addClass('margin_8px_auto'); 
    } 
}); 

$('#workspace').droppable({ 
    accept: '.block', 
    tolerance: 'fit' 
}); 

You can find jsfiddle project here

Answer 2

Marge: auto 8px est le coupable. retirer cela et ajouter

position:relative; 
right:-10px; 
top:10px; 

Ajouter! Importante à la marge en fonction de démarrage i.e.

ui.helper.css('margin', '0 !important');