jquery image de glisser

je veux faire une selection d'image en jquery.
tout d'abord mon expérience avec jquery est de 0. cela dit permettez-moi de décrire ce que je veux atteindre. j'ai fixé la largeur/hauteur de la div. et l'image contenue à l'intérieur de la div est de grande taille. donc, je veux que l'image soit déplaçable à l'intérieur de cette div, de sorte que l'utilisateur peut voir l'image entière.

quelqu'un peut aider. pls être un peu de précisions à propos de la procédure compte tenu de mon jquery fluidité.

Voulez-vous dire, comme la façon dont Google Maps t-il?

OriginalL'auteur amit | 2009-06-19

Vous pouvez utiliser ce qui suit;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drag Demo</title>

<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
<!--
.container {
    margin-top: 50px;
    cursor:move;
}
#screen {
    overflow:hidden;
    width:500px;
    height:500px;
    clear:both;
    border:1px solid black;
}
-->
</style>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script type="text/javascript">
$(function() {
    $("#draggable").draggable();
});
</script>
</head>

<body>

<div class="container">

    <div id="screen">
        <img src="images/211.jpg" class="drag-image" id="draggable"/>
    </div>

</div>

</body>
</html>

L'image n'a pas arrêter de glisser dans les limites de la DIV.
Mais il fait exactement ce que l'utilisateur a demandé dans la question 🙂
Oui, bon point 🙂
u peut me dire aussi comment faire de l'image pour arrêter de glisser le long de ses bords. je veux dire qu'il doit composant logiciel enfichable pour le conteneur et il ne devrait pas y avoir d'espace visible après l'image.
je ne suis pas en mesure de le faire fonctionner. l'image n'est pas traînant. mon langage est exactement le même que le vôtre, c'est juste que tout le contenu est défini à l'intérieur d'une autre div. il y a aussi une autre div (avec un z-index supérieur) sur l'image de la vrd. aussi, comme je comprends, je n'ai pas besoin de "récupérer" les éléments de l'image, qui est pris en charge par le "$", à droite? aussi im l'élément "img" par le DOM. svp aider.

OriginalL'auteur Shadi Almosri

7

Vous voulez que le jQuery Déplaçable de l'INTERFACE utilisateur de l'outil. Le code pour cela, comme avec tous les jQuery, est très simple:
```
$(document).ready(function(){
  $("#draggable").draggable();
});
```
Va créer un objet déplaçable depuis une balise html (le IMG dans votre cas). Et pour limiter la mobilité à une région spécifique, vous devez vous tourner dans son confinement option.

Mise à jour: "Ce qui est" #déplaçable " et "prêt""?
1. '#déplaçable " représente l'élément que vous voulez être en mesure de glisser. Le dièse (#) symbole représente un ID. Lorsque vous ajoutez vos balises d'image, peut donner de lui donner un id comme suit:
  <img src="myimage.jpg" id="draggable" />
  
  Que va faire le code javascript ci-dessus, votre image déplaçable, parce qu'il a le "#déplaçable " id que le jQuery est à la recherche d'.
2. '.ready()' est la méthode qui est automatiquement soulevé par votre navigateur une fois que la page a fini de se charger. Les développeurs sont encouragés par le jQuery groupe à placer tous jQuery code à l'intérieur de cette méthode pour s'assurer que tous les éléments de la page sont complètement chargées avant tout code jQuery qui cherche à les manipuler.
je suis désolé mais qu'est-ce que #déplaçable et "prêt"?
#déplaçable est l'id de l'élément. c'est à dire <div id="draggable">Contenu</div> prêts est la fonction Jquery qui s'exécute ce n'est jamais à l'intérieur ( draggable() ) une fois que le DOM est prêt, c'est à dire que la page est entièrement rendu.

OriginalL'auteur Sampson

de limiter à une région pour cet exemple, le confinement n'est pas vraiment une aide.
J'ai mis en œuvre cette verticale seulement de défilement, les besoins d'amélioration horizontal limite:

stop: function(event, ui) {
    var helper = ui.helper, pos = ui.position;
    var h = -(helper.outerHeight() - $(helper).parent().outerHeight());
    if (pos.top >= 0) {
        helper.animate({ top: 0 });
    } else if (pos.top <= h) {
        helper.animate({ top: h });
    }
}

OriginalL'auteur PH.

1
```
$('#dragMe').draggable({ containment: 'body' });
```
Ce code va rendre possible de faire glisser le div avec l'ID de dragMe où vous voulez à l'intérieur du corps du document. Vous pouvez également écrire une classe ou un id de confinement.
```
$('#dragMe').draggable({ containment: '#container' });
```
Ce code va faire la div dragMe pu être déplaçable à l'intérieur de l'id du conteneur.

Espère que cette aide, sinon vous devriez être capable de trouver la réponse à votre question http://jqueryui.com/demos/draggable/

OriginalL'auteur Joel

Expansion sur la réponse de PH. ce sera l'élastique bounceback chaque fois que l'image est déplacée vers le point le conteneur sous-jacent est exposé:

stop: function(event, ui) {
        var helper = ui.helper, pos = ui.position;
        var h = -(helper.outerHeight() - $(helper).parent().outerHeight());
        var w = -(helper.outerWidth() - $(helper).parent().outerWidth());
        if (pos.top <= h) {
            helper.animate({ top: h });
        } else if (pos.top > 0) {
            helper.animate({ top: 0 });
        }
        if (pos.left <= w) {
            helper.animate({ left: w });
        } else if (pos.left > 0) {
            helper.animate({ left: 0 });
        }
    }

OriginalL'auteur jerrygarciuh

Vous devez vous connecter pour publier un commentaire.

Mise à jour: "Ce qui est" #déplaçable " et "prêt""?