JQuery déplaçable image avec la position sauvegardée
OK il devient maladroit, déjà cherché et essayé pendant environ 5 heures et je suis juste tourner en rond...
Le scénario est simple: C'est l'image d'en-tête d'un profil utilisateur, elle peut être déplacée dans une position et de la position supérieure de l'image est sauvegardée dans une base de données.
Grâce à la Betterave-Betterave "confinement:" parent "" je suis à ce morceau de code, qui, de fait, réagit comme je le veux! Sauf un gros problème. L'Image saute, soit vers le haut ou le bas. Il n'y a pas de défilement lisse? Si je change le "parent" - "parent" ça défile bien, mais... le confinement des cours n'existe plus. De l'aide? 😀
La JS
$(function(){
$(".headerimage").css('cursor','s-resize');
$(".headerimage").draggable({ containment: 'parent', scroll: false, axis: "y", stop: function(event, ui) {
var data = "profileheaderposition="+ui.position.top;
var destination = "/modules/users/profile/save.php";
get_data(data, destination, function(test){
notice(test);
});
}
});
});
Donc, et dernier mais pas moins l'en-Tête est inclus comme ça:
<div class="<?php if ($user->id == $profileuser->id) echo "changer"; ?> ui-corner-all" id="profileheader" style="overflow: hidden; width: 650px; height: 260px; position:relative;">
<?php if($profile->profileheader){
$size = getimagesize($profile->profileheader);
?>
<img id="" class="draggable headerimage" style="position: absolute; top: <?php echo $profile->profileheaderposition; ?>px;" src="<?php echo $profile->profileheader; ?>" alt="profileheader" width="650" />
Comme je l'ai dit heures de recherches sur google n'ont pas de donner tous les résultats - et si je n'aurais pas enregistrer les résultats, il serait très bien fonctionner mais bon...
-- Edit --
Droit maintenant, je suis sur le point de pleurer -.- J'ai mis en place une prime sur celui-ci et les outils pour m'aider à ain jsfiddle mais un compte invité sur ma page web qui est:
http://www.animize.de
Là, vous pouvez vous connecter sur la page avec le nom de l'utilisateur: Gast et le pw gast - Cliquer en haut à droite sur le nom (gast) et vous allez voir le profil de - là, vous pouvez déplacer le headerpicture - et bien sûr, il doit se comporter d'une autre manière qu'il ne le fait - help 🙁
désolé de poser cette question.. quel est le problème avec votre version avec parent: "parent"? Je peux voir le défilement de l'image en douceur.. qu'en est-il défectueux?
avec "parent" elle "saute" vers le bas ou le haut de l'image (au moins dans google chrome) si je veux le faire défiler, - ou / si je fais le parent valeur négative en ajoutant un "-" il fonctionne comme prévu, juste qu'il n'as pas de confinement plus - sens: je peux faire défiler l'image même de l'écran 🙁
désolé, ne peut pas comprendre, votre image est déjà plus grand que le rectangle où vous le montrer, de sorte que chaque fois que vous déplacez (=arrêt) l'image de l'écran (sens sort des limites du rectangle)..
L'objectif est d'avoir un système comme facebook sur leur timeline ou google+ à leurs profils d'effacer certaines missunderstandings
OriginalL'auteur Ivan Schrecklich | 2012-09-25
Vous devez vous connecter pour publier un commentaire.
Essayer ce violon.
J'ai ajouté un si-déclaration à la
drag
événement qui vérifie le positionnement actuel de l'image et sélectionne la position de tête dansui.position.top
si la condition renvoie true si la déplaçable événement à ne pas augmenter ou diminuer la position de tête en frappant les limites de la div. De cette façon, vous pouvez conserver les propriétés de la position de votre div.OriginalL'auteur QQping
Ivan,
Il est difficile de voir pourquoi le code doit être dans une fonction nommée wrapper. Sauf dragability doit être allumé/éteint, puis
.draggable()
juste besoin d'appeler une fois dans un$(function(){...});
structure.Il est également difficile de voir pourquoi vous avez besoin d'écrire des données statiques à partir de php en javascript. Il devrait y avoir rien de selection de l'image que javascript/jQuery ne peut découvrir par lui-même en s'interrogeant le DOM, et même alors, il n'est pas clair pourquoi ce pourrait être nécessaire.
Je m'attends à voir quelque chose comme ceci :
Ivan, voir si vous pouvez mettre en place un violon avec les mêmes symptômes, puis poster un lien vers ici.
jsfiddle.net/UAgDA/25 il l'a fait ici
OriginalL'auteur Beetroot-Beetroot
Voir ce violon pour ma solution à ce. J'ai aussi traité à gauche et à droite de glisser, ce qui n'est pas nécessaire pour votre cas en ce moment, mais pourrait être utile à l'avenir si vous prévoyez d'utiliser une image plus grande que son parent. Dans votre cas, votre image est la même largeur que ses parents alors j'ai ajouté un
threshold
param laisser entraînement vertical être utilisé sans être annulé par la droite et la gauche limites d'être touché.J'ai également ajouté un peu de css pour
grab
etgrabbing
curseurs, de sorte à obtenir un curseur effet similaire à lorsque vous faites glisser un fichier pdf autour, malheureusement, le support de cette curseurs est un peu cassé dans certains navigateurs(IE et chrome dans mes tests), mais firefox est leur montrant droit.Coller mon code ici pour éviter un futur violon de lien brisé.
HTML:
CSS:
JAVASCRIPT:
Ok pas de problème, QQpings solution est trop bonne. merci!!!! 🙂
OriginalL'auteur Nelson
Je suis en utilisant ce code dans mon projet et il fonctionne très bien. J'ai utilisé la solution de QQping et j'ai juste fait une petite modification à faire de l'image pour se déplacer à gauche et à droite. J'espère que cela aide..
http://jsfiddle.net/UAgDA/266/
Acclamations
Bootstrap est l'écrasement de ce code, en raison de laquelle seulement de défilement n'est happenign de (du Haut vers le bas) et (de bas en Haut), pas à gauche, à droite. Quelqu'un peut-il aider s'il vous plaît!
OriginalL'auteur Ricardo de Assuncao Goncalves
Je ne pense pas que vous devez contenir à l'intérieur de
parent
, sinon vous ne serez pas en mesure de le faire glisser vers le haut à l'extérieur de laparent
limiteSinon , jQuery ui fournit de confinement à l'intérieur de deux coordonnées.
Essayer ce code,
HTML
JS
Démo
Désolé, je n'obtiens pas votre commentaire. Pouvez-vous reformuler ?
jsfiddle.net/Zf2vk/8 le comportement est presque comme ici (bien sûr, sans la -150) - comme je l'ai dit, je pense que c'est sur le positionnement de la balise div, mais je n'arrive pas à deviner comment l'éviter.
Donc, vous voulez déplacer l'image vers le bas et de garder l'espace blanc en haut de l'image . Droit ?
Sry il est encore tôt dans la matinée, je suppose que mon anglais est une sorte de rouille droit maintenant... je veux qu'il se comporte comme dans la démo, mais il se comporte comme dans la démo, je l'ai ajouté. (oui copié votre démo, il a essayé de ne pas travailler dans le design, je suis aide - et de ce fait je pense que c'quelque chose au sujet de l'absolu et le positionnement relatif de la conception au lieu de simplement être jsproblem mais d'un autre côté, je ne comprends pas pourquoi il faut que l'img est dans le récipient, il doit juste se comporter de la façon dont il fonctionne dans votre démonstration - comme je l'ai dit je suis une sorte de se mettre en colère avec cette fonctionnalité,...)
OriginalL'auteur Jashwant