jQuery - écrans et différents Glissable (fonction de l'écran)

J'ai beaucoup div de draggable sur ma pagejQuery - écrans et différents Glissable (fonction de l'écran)

$('#bibo').draggable({ 
    addClasses: false, 
    containment: 'window', 
    zIndex: '999', 
    stack: '.tko.sto' 
});

Je sauve la nouvelle position sur DragStop et mettre le nouveau haut et les valeurs de gauche dans le SQL.

Ok, tout fonctionne très bien. Mais quand je visite ma page avec l'ordinateur portable (petit écran) certains div sont hors de l'écran et une barre de défilement est affichée.

Est-il possible de résoudre ce problème si l'écran est trop petit?

Merci d'avance!

Source

2010-09-21 Peter

Bien sûr, ce genre de « réparer cette » action que vous vouliez avoir lieu? – Incognito

Vous pouvez vérifier le $ (window) .width() et faire un peu de maths pour voir si vous devez déplacer votre div.

var windowWidth = $(window).width(); 
var left = $("div").position().left; 
var width = $("div").width(); 
if (windowWidth < left + width) {     
    var newLeft = left - ((left + width) - windowWidth); 
    $("div").css({ left: newLeft }); 
}

Vous pouvez également acheive cela avec l'utilitaire jqueryui position:

Source

2010-09-24 23:22:39 fehays

Salut fehays, le problème est que la valeur $ (window) .width() n'est pas la vraie taille de la fenêtre visible Ma solution pour obtenir la bonne largeur et hauteur était de créer un div 1px et le mettre que vous pouvez obtenir la valeur supérieure et gauche (multiplier 2) .Mais ce n'est pas une bonne solution.Je pense que la position de jq-ui est exactement ce que je veux, mais je ne comprends pas :(... peut vous créez un petit exemple jsfiddle pour moi? Voici un petit exemple de mon code -> http://jsfiddle.net/L5Wbt/7/ – Peter

Voici un exemple: http://jsfiddle.net/L5Wbt/11/ ajoutez le repositionnement à un $ (window) .resize(). En gros, le "my" est l'emplacement de l'élément qui est déplacé. "at" spécifie quelle partie de l'élément cible doit positionner "my" to. de "est l'élément que vous allez positionner.Je ne suis pas sûr si cette explication était mieux que le doc jqueryui mais j'ai essayé :) – fehays

@Peter - Si cette résolution d votre question assurez-vous d'attribuer la prime aussi, c'est une action distincte d'accepter une réponse correcte :) –

Une solution simple serait de calculer les tailles relatives et d'ajuster en conséquence. Par exemple, au lieu d'enregistrer la coordonnée directe x, y, calculez peut-être le pourcentage x, y en fonction de la taille de l'écran et enregistrez-le.

Source

2010-09-21 06:13:41

Salut Jordan, ça marche avec le pourcentage mais ce n'est pas la position exacte. Le problème est que vous ne pouvez pas enregistrer (par exemple) ce top position: 15,154789%; à gauche: 55,11987% ;. Css n'autorise que 1 chiffre après la virgule :( – Peter

Ce que je suggère, c'est de convertir les offsets de pixels en un pourcentage et de les mémoriser, puis quand vous chargez la page, convertissez le pourcentage en pixels –

raisonnement;) .. Mon espoir était que peut-être jquery ui a une fonction pour cela. Mais je n'ai rien trouvé :( – Peter

jQuery - écrans et différents Glissable (fonction de l'écran)

Répondre

Questions connexes