jQuery UI Déplaçable + CSS Transform Causes “Sauter”

EDIT: je l'ai résolu. Mais StackOverflow n'est pas de me laisser marquer ma réponse comme la solution, j'ai donc tout simplement ne vais pas.

Je vais avoir un problème quant à l'utilisation Déplaçable avec un CSS transformé parent. En gros, j'ai besoin d'utiliser le positionnement absolu pour frayer un Déplaçable div directement sous le curseur. Lorsque le positionnement absolu est utilisé avec des CSS transforme, l'élément déplaçable fait un peu de saut d'obstacles de droit que le glissement a lieu. Après le saut a lieu, le comportement se poursuit comme prévu. Le saut ne se produit pas si aucune des transformations sont appliquées à la déplaçable ou le div parent.

Ici un violon qui montre exactement ce que le problème est le suivant:
http://jsfiddle.net/qBubN/7/

body {
     background-color: blue;   
}

#draggable {
    position: absolute;
    left: 50px;
    top: 50px;
    background-color: rgba(0,0,0,0.5);
    border: 1px solid black;
    width: 350px;
    height: 350px;
    color: white;
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);}

     $("#draggable").draggable({
            scroll: true, 
            distance: 5,
            grid : [ 10, 10 ],
            start: function (event, ui) {
            }
        });

<html>
    <body>
       <div id="draggable">
           Hello!
        </div>
    </body>
</html>

Déjà essayé l'application de ce patch, en vain. Il y a une (bonne) chance ce correctif est trop vieux pour travailler. Il ya aussi une chance que je suis en appliquant le patch à tort. Webkit et jQuery déplaçable saut

  • Pour plus de clarté, je suis sur Firefox 21.0
InformationsquelleAutor Thomas Havlik | 2013-06-13
  1. 14
    //css3 transform bug with jquery ui drag - fixed(works fine whether position, absolute or relative)
var __dx;
var __dy;
var __scale=0.5;
var __recoupLeft, __recoupTop;
$("#draggable").draggable({
//revert: true,
zIndex: 100,
drag: function (event, ui) {
//resize bug fix ui drag `enter code here`
__dx = ui.position.left - ui.originalPosition.left;
__dy = ui.position.top - ui.originalPosition.top;
//ui.position.left = ui.originalPosition.left + ( __dx/__scale);
//ui.position.top = ui.originalPosition.top + ( __dy/__scale );
ui.position.left = ui.originalPosition.left + (__dx);
ui.position.top = ui.originalPosition.top + (__dy);
//
ui.position.left += __recoupLeft;
ui.position.top += __recoupTop;
},
start: function (event, ui) {
$(this).css('cursor', 'pointer');
//resize bug fix ui drag
var left = parseInt($(this).css('left'), 10);
left = isNaN(left) ? 0 : left;
var top = parseInt($(this).css('top'), 10);
top = isNaN(top) ? 0 : top;
__recoupLeft = left - ui.position.left;
__recoupTop = top - ui.position.top;
},
stop: function (event, ui) {
$(this).css('cursor', 'default');
//alternate to revert (don't use revert)
$(this).animate({
left: $(this).attr('oriLeft'),
top: $(this).attr('oriTop')
}, 1000)
},
create: function (event, ui) {
$(this).attr('oriLeft', $(this).css('left'));
$(this).attr('oriTop', $(this).css('top'));
}
});
    InformationsquelleAutor raghugolconda
  2. 11

    J'ai trouvé la solution.

    La solution est de les éviter complètement position:absolute; lors de l'utilisation de Déplaçable et CSS transforme. Vous pouvez obtenir facilement manipuler quoi que ce soit d'une façon absolue/fenêtre/whatever coordonnées en relatif, c'est ce que j'ai fait.

    Dans mon cas, j'ai été fraie un élément Déplaçable en dessous de la souris. J'ai calculé la position relative basée sur la position de la souris avec le décalage() de l'élément (à la fois dans la fenêtre de coordonnées) et ensuite divisé par l'ampleur de la div parent.

    Voici un extrait:

    //ops.[x|y] is the mouse position in window coords
//parentDiv.offset().[left|right] is the div position in window coords
//get the scale transform matrix from our poorly written panzooming lib
var mtx = graph.parentDiv.panzoom('getMatrix');
var zx = mtx[0];
var zy = mtx[3];
//calculate the relative position
var x = (ops.x - parentDiv.offset().left) / zx;
var y = (ops.y - parentDiv.offset().top) / zy;
//set some initial css
parentDiv.css('position', 'relative')
.css('left', x + 'px')
.css('top', y + 'px');
//initialize the draggable
parentDiv.draggable({
stack: $(graph.parentDiv).children(),
drag: function(e, ui){
var mtx = graph.parentDiv.panzoom('getMatrix');
var zoomScaleX = mtx[0];
var zoomScaleY = mtx[3];
//scale the delta by the zoom factor
var dx = ui.position.left - ui.originalPosition.left;
var dy = ui.position.top - ui.originalPosition.top;
ui.position.left = ui.originalPosition.left + (dx / zoomScaleX);
ui.position.top = ui.originalPosition.top + (dy / zoomScaleY);
}
});
    InformationsquelleAutor Thomas Havlik
  3. 3

    Une solution beaucoup plus simple consiste à envelopper l'échelle du contenu avec un autre div et définir à être déplaçable à la place.

    InformationsquelleAutor galatians
  4. 0

    position:absolute; est en effet problématique. J'ai cependant trouvé une solution alternative qui empêche le saut, tout en gardant un absolute base pour les coordonnées et le maintenir en position, en retournant le css position de relative sur mousedown, et de le restaurer à absolute sur mouseup, telles que les suivantes:

    $('#container').on('mousedown', 'canvas', function (e) {
e.currentTarget.style.position = 'relative';
}).on('mouseup', 'canvas', function (e) {
if (e.currentTarget.style.position !== 'absolute'){
e.currentTarget.style.position = 'absolute';
}
});

    Il fonctionne bien pour les événements de la souris. Et pour résoudre le problème pour les événements tactiles, ainsi que les touchpunch' plugin, j'ai également dû annuler ', cliquez sur' événements (pour les mobiles et tactiles modalité seulement).

    InformationsquelleAutor hexalys
  5. 0

    Expansion sur "raghugolconda" top réponse:

    J'ai eu de la vitesse de déplacement et de sauter des problèmes avec jQueryUI déplaçable et CSS transform: scale()

    L'image conteneur est évolutive avec le curseur de zoom, la place rouge est déplaçable.

    jQuery UI Déplaçable + CSS Transform Causes “Sauter”

    Ce qui s'est passé quand j'ai essayé de faire glisser le rouge élément:

    • Élément sauté lorsque vous avez essayé de la faire glisser
    • Faites glisser la vitesse est trop faible lorsque le Zoom était de plus de 100%
    • Faites glisser la vitesse est trop rapide quand le Zoom est à 100%

    Correctif:

    1. Calculer la fraction de la valeur de l'échelle) à partir de jQuery curseur.
      Voici mon curseur que transformations de l'image contenant:

      var fraction = 1;  
$("#slider").slider({
value: 0,
min: -70,
max: 70,
step: 10,
slide: function (event, ui) {
fraction = (1 + ui.value / 100);  
$("#infoSlider").text('Zoom: ' + Math.floor(fraction * 100) + '%');
$('.image_scalable_container').css({
'-webkit-transform': 'scale(' + fraction + ')',
'-moz-transform': 'scale(' + fraction + ')',
'-ms-transform': 'scale(' + fraction + ')',
'-o-transform': 'scale(' + fraction + ')',
'transform': 'scale(' + fraction + ')'
});
}
});

    2. Remplacer jQuery UI déplaçable glisser et commencer fonctions.

    Dans glisser vous modifiez la vitesse de déplacement (à l'échelle de 0,9 signifie drag_speed = 1 /0.9 = 1.11 )

    Voici mon exemple:

    $("#marker").draggable({
//revert: true,
zIndex: 100,
drag: function (event, ui) {
var drag_speed = 1 / fraction;
__dx = (ui.position.left - ui.originalPosition.left) * drag_speed;
__dy = (ui.position.top - ui.originalPosition.top) * drag_speed;
ui.position.left = ui.originalPosition.left + (__dx);
ui.position.top = ui.originalPosition.top + (__dy);            
ui.position.left += __recoupLeft;
ui.position.top += __recoupTop;
},        
start: function (event, ui) {            
//resize bug fix ui drag
var left = parseInt($(this).css('left'), 10);
left = isNaN(left) ? 0 : left;
var top = parseInt($(this).css('top'), 10);
top = isNaN(top) ? 0 : top;
__recoupLeft = left - ui.position.left;
__recoupTop = top - ui.position.top;
},
});
    InformationsquelleAutor nillas