J'ai essayé d'utiliser la dragge intégrée de JQuery et j'ai essayé d'utiliser des fonctions de traînée personnalisées sans en profit. Tous deux ont leurs problèmes respectés et je vais essayer de mettre en évidence les deux.
Fondamentalement, j'essaie d'autoriser le glissement d'un élément qui se trouve sur un conteneur divisé. Les méthodes suivantes fonctionnent ok em> sur un élément échelonné inférieur à celui de Toute aide serait appréciée. Merci pour votre temps. P> HTML STRY> P> js strud> p> i J'ai essayé d'utiliser une fonction de glisser personnalisée, mais il est inutilisable après autour d'une balance code> 2 code>. p> 2 code>. Mais si vous allez plus haut que cela, nous voyons des problèmes. P>
(function ($) {
$.fn.drags = function (opt) {
opt = $.extend({
handle: "",
cursor: "move"
}, opt);
if (opt.handle === "") {
var $el = this;
} else {
var $parent = this;
var $el = this.find(opt.handle);
}
return $el.css('cursor', opt.cursor).on("mousedown", function (e) {
if (opt.handle === "") {
var $drag = $(this).addClass('draggable');
} else {
$(this).addClass('active-handle')
var $drag = $parent.addClass('draggable');
}
var
drg_h = $drag.outerHeight(),
drg_w = $drag.outerWidth(),
pos_y = $drag.offset().top + drg_h - e.pageY,
pos_x = $drag.offset().left + drg_w - e.pageX;
follow = function (e) {
$drag.offset({
top: e.pageY + pos_y - drg_h,
left: e.pageX + pos_x - drg_w
})
};
$(window).on("mousemove", follow).on("mouseup", function () {
$drag.removeClass('draggable');
$(window).off("mousemove", follow);
});
e.preventDefault(); // disable selection
}).on("mouseup", function () {
if (opt.handle === "") {
$(this).removeClass('draggable');
} else {
$(this).removeClass('active-handle');
$parent.removeClass('draggable');
}
});
}
})(jQuery);
$("#dragme").drags({}, function (e) {});
Méthode 2 - Fonction de glisser-commande h2>
3 Réponses :
Un problème similaire est mentionné ici: jQuery - CSS "Transform: échelle" affecte ".Offset () 'de jQuery
Il semble que le problème découle du fait que JQuery ne renvoie pas la taille exacte pour les éléments à l'échelle et, par conséquent, définissez les valeurs de décalage de droite à l'élément. P> Pour résoudre ce problème, il suggère d'abord l'échelle de réglage sur 1 et le réglage de décalage puis de réinitialiser la valeur d'échelle. p>
mais cela seul ne résoud pas le problème ici. Étant donné que la position de la souris est prise pendant sa mise à l'échelle, les valeurs de position doivent également être divisées par la valeur de l'échelle. P>
Voici une version modifiée du code: P>
var scl = 2.5; var drg_h = $drag.outerHeight(), drg_w = $drag.outerWidth(), pos_y = $drag.offset().top/scl + drg_h - e.pageY/scl, pos_x = $drag.offset().left/scl + drg_w - e.pageX/scl; follow = function(e) { var size = { top:e.pageY/scl + pos_y - drg_h+scl*2, left:e.pageX/scl + pos_x - drg_w+scl*2 }; $drag.parent().css("transform","scale(1)"); $drag.offset(size); $drag.parent().css("transform","scale("+scl+")"); };
Wow, c'est un excellent travail! Merci pour ça. J'ai un cas d'utilisation similaire que j'ai essayé de faire fonctionner cela. Je sais que ce n'était pas la question envisagée, mais je me demandais si cela ne me dérangeait pas de jeter un coup d'œil et de voir ce que je pouvais faire pour que cela fonctionne pour que cela fonctionne sous ce genre d'environnement mis à l'échelle avec son parent, pas celui étant mis à l'échelle. Je l'ai édité un TAD et cela fonctionne légèrement, mais se téléporte toujours un peu.
Il semble être lié aux valeurs de marge et de rembourrage, car elles sont également prises en calcul de la position du curseur. Pour faire un chèque rapide, j'ai ajouté après CSS: Corps, .Trimspace, .FormContainer, # Formbox {Marge: 0PX! IMPORTANT; PADING: 0PX! IMPORTANT; } code> et il fonctionne bien. Voici Fiddle
Hmm, je suppose qu'il n'y a pas de solution facile.
Voici un exemple de glisser simple avec la mise à l'échelle, cependant, à Prue Dom.
De ma question, vous pouvez voir que ce n'était pas la réponse que je cherche, mais même si vous n'avez donné aucun effort pour me montrer même comment je ferais cela sur un conteneur à la score
Le DIV se déplace dans un récipient à l'échelle qui a été mis à l'échelle de 2 en X et Y coordonnées. L'exemple fonctionne parfaitement bien dans IE11, Firefox et Chrome à n'importe quelle échelle. En fait, c'est très simple, si le parent a échoué, le mouvement, ici, j'utilise ici E.ClientX sur mesure, de la cible de traînée doit être divisée par m.
Voici quelques-unes de mes conclusions pour vous assurer que vous faites glisser sur un conteneur mis à l'échelle fonctionne pour Méthode une forte>. La seule mise en garde consiste à vous assurer que vous avez Tout d'abord, utilisez ce code en haut de votre JavaScript. Ce wil aide à s'assurer que la zone dressée fonctionne avec un conteneur saclé. p> Voici quelques fonctions nécessaires pour résoudre le glisser de sorte qu'il fonctionne sur un conteneur à l'échelle. p> Vous le souhaitez si vous souhaitez activer l'élément à redimensionner sur un conteneur à l'échelle. P> pour faire un élément glissant, j'utilise la fonction suivante. P> var cent code> comme le pourcentage mis à l'échelle déclarée avant que l'une de ces actions se produise.
C'est parfait. Merci!
essayez-vous de faire une fonction de traînée personnalisée? Jquery-Ui a déjà une fonction draggible.
J'ai testé votre code avec quelques entrées à l'échelle. Cela semble comme une fois qu'il frappe environ 1,75, il commence à scintiller et sauter comme vous le suggérez. Tout ce qui est ci-dessous semble faire glisser très bien.
J'ai pris la liberté de mettre à jour votre Jsfiddle aussi bien pour pouvoir suivre la position et la taille. Je vais essayer quelques autres choses, mais je pense que cela peut être un problème connexe de navigateur.
Vérifiez cette réponse Stackoverflow.com/questions/19787104/...