jquery ui faites glisser l'assouplissement/inertie

Comment activer l'assouplissement ou l'inertie lorsque vous faites glisser un élément à l'aide de jquery ui déplaçable (http://jqueryui.com/demos/draggable/)? J'aimerais recréer l'assouplissement similaire à maps.google.com que vous jetez/faites glisser la carte, il facilite en place. Idéalement, j'aimerais déplacer l'élément de déplacement basé sur la force de vous jeter/faites glisser l'élément. Comment voulez-vous accomplir cette fonctionnalité? Peut-être que jquery ui déplaçable n'est pas nécessaire, mais je suis à la recherche d'imiter le glissement et l'assouplissement trouvé sur Google Maps.

Merci!

Si vous n'avez pas à utiliser l'INTERFACE utilisateur de jQuery, c'est l'un des plus élégants de la vanille JS solutions que j'ai vu: jsfiddle.net/soulwire/znj683b9

InformationsquelleAutor jaysonp | 2010-12-14

J'ai utilisé quelques idées de ici mais intégré avec l'INTERFACE utilisateur de jQuery à la place. Vous aurez à mettre en œuvre une logique de gérer une dynamique d'animation qui pousse l'élément hors des limites du terrain (en dehors de celle du parent conteneur des frontières)

Le code résultant:

$(function() {
var $d = $("#draggable");
var x1, x2,
y1, y2,
t1, t2;  //Time
var minDistance = 40; //Minimum px distance object must be dragged to enable momentum.
var onMouseMove = function(e) {
var mouseEvents = $d.data("mouseEvents");
if (e.timeStamp - mouseEvents[mouseEvents.length-1].timeStamp > 40) {
mouseEvents.push(e);
if (mouseEvents.length > 2) {
mouseEvents.shift();
}
}
}
var onMouseUp = function() {
$(document).unbind("mousemove mouseup");
}
$d.draggable({
start: function(e, ui) {
$d.data("mouseEvents", [e]);
$(document)
.mousemove(onMouseMove)
.mouseup(onMouseUp);
},
stop: function(e, ui) {
$d.stop();
$d.css("text-indent", 100);
var lastE = $d.data("mouseEvents").shift();
x1 = lastE.pageX;
y1 = lastE.pageY;
t1 = lastE.timeStamp;
x2 = e.pageX;
y2 = e.pageY;
t2 = e.timeStamp;
//Deltas
var dX = x2 - x1,
dY = y2 - y1,
dMs = Math.max(t2 - t1, 1);
//Speeds
var speedX = Math.max(Math.min(dX/dMs, 1), -1),
speedY = Math.max(Math.min(dY/dMs, 1), -1);
//Distance moved (Euclidean distance)
var distance = Math.sqrt(Math.pow(x1-x2, 2) + Math.pow(y1-y2, 2));
if (distance > minDistance) {
//Momentum
var lastStepTime = new Date();
$d.animate({ textIndent: 0 }, {
duration: Math.max(Math.abs(speedX), Math.abs(speedY)) * 2000,
step: function(currentStep){
speedX *= (currentStep / 100);
speedY *= (currentStep / 100);
var now = new Date();
var stepDuration = now.getTime() - lastStepTime.getTime();
lastStepTime = now;
var position = $d.position();
var newLeft = (position.left + (speedX * stepDuration / 4)),
newTop = (position.top + (speedY * stepDuration / 4));
$d.css({
left: newLeft+"px",
top: newTop+"px"
});
}
});
}
}
});
});

L'essayer

beau travail. très cool.
J'aime cela! 😀
Fantastique!!!! J'ai fait quelques réglages et le mettre sur jsFiddle: jsfiddle.net/entropo/gPdzC
Je viens de regarder à ce code et vous demandez-vous pourquoi le $d.css("text-indent", 100); ligne est-elle nécessaire? J'ai essayé de l'enlever, ce qui a causé l'élan partie à jamais de déclenchement. J'ai aussi essayé d'ajouter du texte à la div, qui a révélé que le text-indent valeur diminué lentement à 0 après l'élan partie incendies... ce qui est bizarre.
Cette ligne définit de façon à ce que le script s'anime à partir de 100% à 0% (propriété, peu importe), à chaque fois que vous laissez la souris aller. Nous profitons de cette l'intérieur de l'animer de la méthode étape de la propriété de déplacer manuellement l'objet "une étape à la fois", la production de la dérive de l'effet. Je ne peux pas prendre le crédit pour ce bien. J'ai pris beaucoup de la logique de l'article que j'ai lié.
Ne fonctionne pas sous FF 17.0.1 (à l'aide de Jquery 1.9 + JQuery UI 1.9.2). La boîte devient négative haut assez bien tout de suite. En Chrome - la boîte de cesse de répondre sur la souris se déplace après quelques succès se déplace.
Besoin, merci! Semble que nous allons à un endroit vraiment agréable au sujet de la gravité et de la physique avec JavaScript. Aussi vient de confirmer, et c'est en travaillant sur le dernier Firefox Quantique libération 65.0.1. De grandes choses!

InformationsquelleAutor simshaun

Le travail simshaun fait sur c'est fantastique.

J'ai foiré avec sa version et a obtenu un peu plus lisse animation avec le jquery.l'assouplissement plugin.

Essayer sur jsfiddle.

$(document).ready(function() {
$('#dragme').draggable({
start: function(e, ui) {
dragMomentum.start(this.id, e.clientX, e.clientY, e.timeStamp);
},
stop: function(e, ui) {
dragMomentum.end(this.id, e.clientX, e.clientY, e.timeStamp);
}  
});
});
var dragMomentum = new function () {    
var howMuch = 30;  //change this for greater or lesser momentum
var minDrift = 6; //minimum drift after a drag move
var easeType = 'easeOutBack';
// This easing type requires the plugin:  
// jquery.easing.1.3.js  http://gsgd.co.uk/sandbox/jquery/easing/
var dXa =[0];
var dYa =[0];
var dTa =[0];
this.start = function (elemId, Xa, Ya, Ta)  {
dXa[elemId] = Xa;
dYa[elemId] = Ya;
dTa[elemId] = Ta;
}; //END dragmomentum.start()
this.end = function (elemId, Xb, Yb, Tb)  {        
var Xa = dXa[elemId];
var Ya = dYa[elemId];
var Ta = dTa[elemId];
var Xc = 0;
var Yc = 0;
var dDist = Math.sqrt(Math.pow(Xa-Xb, 2) + Math.pow(Ya-Yb, 2));
var dTime = Tb - Ta;
var dSpeed = dDist / dTime;
dSpeed=Math.round(dSpeed*100)/100;
var distX =  Math.abs(Xa - Xb);
var distY =  Math.abs(Ya - Yb);
var dVelX = (minDrift+(Math.round(distX*dSpeed*howMuch / (distX+distY))));
var dVelY = (minDrift+(Math.round(distY*dSpeed*howMuch / (distX+distY))));
var position = $('#'+elemId).position();
var locX = position.left;
var locY = position.top;
if ( Xa > Xb ){  //we are moving left
Xc = locX - dVelX;
} else {  // we are moving right
Xc = locX + dVelX;
}
if ( Ya > Yb ){  //we are moving up
Yc = (locY - dVelY);
} else {  //we are moving down
Yc = (locY + dVelY);
}
var newLocX = Xc + 'px';
var newLocY = Yc + 'px';
$('#'+elemId).animate({ left:newLocX, top:newLocY }, 700, easeType );
}; //END  dragmomentum.end()
};  //END dragMomentum()

J'étais en train de jouer avec cela. Un peu bizarre (au moins dans google Chrome), mais agréable. Par exemple, essayez de changer l'assouplissement à easeOutQuad (même s'il est probablement fait pour d'autres méthodes d'accélération) et essayer de lancer l'objet hors de la boîte. Parfois, il sera plus facile à l'extérieur de la boîte englobante.
Ouais j'ai remarqué ça, c'est capricieux, avec une zone de confinement. À l'intérieur d'un "overflow:hidden" boîte", il effectue assez bien pour les navigateurs modernes... mais pas sur un iPad. Qui suce, comme c'est une cible majeure pour ce que je suis en train d'essayer. J'imagine que je vais rouler mes propres règles de délimitation dans le dragmoMentum.fin de la fonction, et de l'utiliser à l'aise à l'intérieur de la boîte.
A finalement obtenu une solution qui joue bien avec le confinement des boîtes. Voir ici (jsfiddle).

InformationsquelleAutor mattsahr

Vous devez vous connecter pour publier un commentaire.