J'essaie de faire une division à la fois ré-sizable et drug avec jQuery. Cependant, la mise en œuvre semble être assez buggy.
J'ai trouvé plusieurs questions similaires, mais pas de solution.
J'ai essayé d'utiliser plusieurs configurations POSITION et essayé également Rafraîchissements Option, rien n'a fonctionné.
Les bugs que je ressens:
J'ai minimisé l'exemple. voir ici pour un exemple complet mais simple. Comment puis-je résoudre ce problème problème de confinement?
Ceci est reproductible dans tous les navigateurs, tout ce que le violon semble casser IE 10 et opéra.
3 Réponses :
Il s'agit d'un problème avec l'interface utilisateur dragge elle-même, le problème a déjà été signalé ici
Les correctifs dans votre cas sont (au moins dans la dernière version de Chrome sur lequel je travaille) sur
Padding au parent, Démo trouvé ici < / a>
- Ajouter un 5PX
Border au parent, Démo trouvé ici < / a>
- Ajouter un 5PX
Marge à l'enfant, Démo trouvé ici < / a>
- Mélange de l'un des éléments ci-dessus pour une augmentation de 5px
- Ajouter
Overflow: caché au parent , Démo trouvé ici . Je ne sais pas pourquoi celui-ci fonctionne, mais il semble faire le travail parfaitement
Le seuil de 5px ne peut être pertinent que pour l'exemple, certaines joueurs peuvent être nécessaires pour obtenir la valeur correcte dans votre cas réel. Certains autres exemples que j'ai constatés ont eu besoin de moins de rembourrage ou de largeur des frontières, je suppose qu'il est basé sur la manière dont les éléments sont importants, mais je ne suis pas sûr. J'ai testé la cinquième solution dans leurs exemples et il semblait y travailler aussi bien
Overflow: Caché Est-ce que pour moi, très particulier! Où avez-vous trouvé cette solution? creux le suivi de bugs? J'ai l'impression que mes compétences de Google m'ont échoué aujourd'hui!
@ Willemd'Haeseer non, j'ai trouvé la page via Google Recherches (:
Il est important que la hauteur et la largeur soient définies sur l'enfant
Vous pouvez essayer d'utiliser la fonction STOP sur l'interaction glagible pour modifier les paramètres redimensionnés. Cela m'a aidé lorsque j'avais des problèmes similaires lors de la définition du confinement sur les interactions redimensionnables et draguables.
Remarque: cela fonctionne avec un rapport de format verrouillé sur l'interaction redimensable. em> p> échantillon: p> <div id="container" style="width: 320px; height: 240px; background-color: #000000;">
<div id="subject" style="width: 240px; height: 180px; background-color: #ffffff;">
</div>
</div>
<script type="text/javascript" language="javascript">
jQuery(document).ready(function() {
jQuery("#subject").resizable(
{
aspectRatio: 4 / 3,
minHeight: 120,
minWidth: 160,
maxHeight: 240,
maxWidth: 320
}).draggable(
{
containment: "#container",
stop: function(evt, ui) {
var container = jQuery("#container");
var subject = jQuery("#subject");
var containerPosition = container.position();
var subjectPosition = subject.position();
var relativeLeft = subjectPosition.left - containerPosition.left;
var relativeTop = subjectPosition.top - containerPosition.top;
var maxWidth = (container.width() - relativeLeft) | 0;
var maxHeight = (container.height() - relativeTop) | 0;
subject.resizable("option", "maxWidth", maxWidth);
subject.resizable("option", "maxHeight", maxHeight);
}
});
});
</script>
à JQuery, Comment réparer le bug de confinement lorsque vous utilisez Refenseable () et draggable () simultanément? est fermé, mais la solution à ce problème est la suivante:
Ajouter Position: relative au parent / conteneur.
Overflow: caché n'a pas fonctionné pour moi (dans Firefox; n'ont pas encore testé les autres navigateurs)