jquery: retour Variables NaN
https://stackoverflow.com/questions/857703
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Ne laissez pas effrayer ci-dessous code loin . La question est très simple, seulement deux lignes sont des ennuis:
Pourquoi mon code généré un code d'erreur NaN? Je suis en train de soustraire une valeur variable d'une autre manière la position des éléments sera correcte.
Les variables ont la valeur de la position jQuery () qui est censé être un nombre entier de toute façon.
Vérifier les lignes de ces lignes:
// For some reason NaN error code gets generated when line below gets executed.
var posTop = Startpos.top - Stoppos.top;
var posLeft = Startpos.left - Stoppos.left;
Code complet:
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<title>Drag drop 1</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var Startpos = new Array;
var Stoppos = new Array;
// Make images draggable.
$(".item").draggable({
// Elements cannot go outside #container
containment: 'parent',
// Make sure the element can only be dropped in a grid.
grid: [150,150],
// Find original position of dragged image.
start: function(event, ui) {
// Make sure picture always are on top when dragged (z-index).
$(this).css({'z-index' : '100'});
// Show start dragged position of image.
Startpos = $(this).position();
$("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
},
// Find position where image is dropped.
stop: function(event, ui) {
// Revert to default layer position when dropped (z-index).
$(this).css({'z-index' : '10'});
// Show dropped position.
Stoppos = $(this).position();
$("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
}
});
$(".item").droppable({
drop: function(event, ui) {
// Dragged image gets swapped with dropped on image.
var prev_position = "#" + $(this).attr('id');
// For some reason NaN error code gets generated when line below gets executed.
var posTop = Startpos.top - Stoppos.top;
var posLeft = Startpos.left - Stoppos.left;
// Below variables will work. But unfortunately they
// doesn't give the correct numbers for the purpose.
// var posTop = Startpos.top;
// var posLeft = Startpos.left;
$(prev_position).css({'top' : posTop, 'left' : posLeft});
$("div#test").text("Passed variables. Top: " + posTop + " left: " + posLeft);
}
});
});
</script>
<style>
body {
}
#container {
position:relative;
width:480px;
border:1px solid #000;
}
.item {
position:relative;
width:150px;
height:150px;
z-index:10;
}
</style>
</head>
<body>
<div id="container">
<img id="productid_1" src="images/pic1.jpg" class="item" alt="" title="" /><img id="productid_2" src="images/pic2.jpg" class="item" alt="" title="" /><img id="productid_3" src="images/pic3.jpg" class="item" alt="" title="" /><img id="productid_4" src="images/pic4.jpg" class="item" alt="" title="" /><img id="productid_5" src="images/pic5.jpg" class="item" alt="" title="" /><img id="productid_6" src="images/pic6.jpg" class="item" alt="" title="" /><img id="productid_7" src="images/pic7.jpg" class="item" alt="" title="" /><img id="productid_8" src="images/pic8.jpg" class="item" alt="" title="" /><img id="productid_9" src="images/pic9.jpg" class="item" alt="" title="" />
</div>
<div style="clear:both;"></div>
<div id="start">Waiting...</div>
<div id="stop">Waiting...</div>
<div id="hover">Waiting...</div>
<div id="stop2">Waiting...</div>
<div id="test">Waiting...</div>
</body>
</html>
La solution
Le problème est que droppable.drop () est appelée avant draggable.stop (). Donc, votre Stoppos n'a pas encore été calculé.
Une façon de traiter ce serait de suivre simplement ce que l'article est en cours de déplacement, et calculer la position que dans droppable.drop (). par exemple. (Sous-ensemble de votre code), notez l'objet "Faire glisser".
$(document).ready(function() {
var Startpos = new Array;
var Stoppos = new Array;
var Dragging = null;
// Make images draggable.
$(".item").draggable({
// Elements cannot go outside #container
containment: 'parent',
// Make sure the element can only be dropped in a grid.
grid: [150,150],
// Find original position of dragged image.
start: function(event, ui) {
Dragging=this;
// Make sure picture always are on top when dragged (z-index).
$(this).css({'z-index' : '100'});
// Show start dragged position of image.
Startpos = $(this).position();
$("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
},
// Find position where image is dropped.
stop: function(event, ui) {
// Revert to default layer position when dropped (z-index).
$(this).css({'z-index' : '10'});
// Show dropped position.
Stoppos = $(this).position();
$("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
Dragging=null;
}
});
Cependant, il y a probablement plusieurs autres façons légitimes de contourner cela.
Autres conseils
Pour autant que je sais la position () n'est pas une fonction jQuery.
Essayez ceci:
Startpos = $(this).offset();
Vous devriez alors être en mesure d'accéder aux propriétés haut et à gauche.
êtes-vous sûr que ce sont les lignes qui causent le problème? -
pouvez-vous s'il vous plaît confirmer que "var = postop Startpos.top - Stoppos.top;"
renvoie un entier / valeur Double valide pour postop? Je codais sur un de mes projets la semaine dernière et a eu le même problème NaN, j'ai essayé d'analyser la valeur de nombre entier et cela a fonctionné.
Parce que vous faites un calcul mathématique, essayez l'analyse syntaxique des valeurs dans Double / Int avant de les soustraire,
Parfois, la solution est assez simple et nous avons tendance à plus compliquer.
Si Parsing ne fonctionne pas, il se pourrait que vous ne passe pas dans la bonne valeur du tableau. Essayez quelque chose comme STARTPOS [0] .Top
Hope this helps, Bonne chance!
Soit STARTPOS ou Stoppos sont encore juste un tableau vide lorsque vous venez effectuer ce calcul.
Essayez de les mettre à un défaut approprié à la place (0, 0), car cela peut rendre plus facile de traquer ce qui se passe en erreur.
Ce qui me déconcerte est que cela fonctionne:
remplacer:
var posTop = Startpos.top - Stoppos.top;
var posLeft = Startpos.left - Stoppos.left;
var posTop = Startpos.top;
var posLeft = Startpos.left;
fonctionnera même si les chiffres ne sont pas ce que je veux. Il semble soustractions de est invalide pour simples une raison.
Merci pour l'aide les gars:)
Nous avons trouvé le problème.
Stoppos = $(this).position();
ne devrait pas être:
$(".item").draggable({
stop: function(event, ui) {
Mais au lieu de:
$(".item").droppable({
drop: function(event, ui) {
Code complet:
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<title>Drag drop 1</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var Startpos = null;
var Stoppos = null;
// Make images draggable.
$(".item").draggable({
// Elements cannot go outside #container
containment: 'parent',
// Make sure the element can only be dropped in a grid.
grid: [150,150],
// Find original position of dragged image.
start: function(event, ui) {
// Make sure picture always are on top when dragged (z-index).
$(this).css({'z-index' : '100'});
// Show start dragged position of image.
Startpos = $(this).position();
$("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
},
// Find position where image is dropped.
stop: function(event, ui) {
// Revert to default layer position when dropped (z-index).
$(this).css({'z-index' : '10'});
}
});
$(".item").droppable({
drop: function(event, ui) {
// Dragged image gets swapped with dropped on image.
var prev_position = "#" + $(this).attr('id');
Stoppos = $(this).position();
var posTop = Startpos.top - Stoppos.top;
var posLeft = Startpos.left - Stoppos.left;
$(prev_position).css({'top' : posTop, 'left' : posLeft});
// Test window
$("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
$("div#test").text("Passed variables. Top: " + posTop + " left: " + posLeft);
}
});
});
</script>
<style>
body {
}
#container {
position:relative;
width:480px;
border:1px solid #000;
}
.item {
position:relative;
width:150px;
height:150px;
z-index:10;
}
</style>
</head>
<body>
<div id="container">
<img id="productid_1" src="images/pic1.jpg" class="item" alt="" title="" /><img id="productid_2" src="images/pic2.jpg" class="item" alt="" title="" /><img id="productid_3" src="images/pic3.jpg" class="item" alt="" title="" /><img id="productid_4" src="images/pic4.jpg" class="item" alt="" title="" /><img id="productid_5" src="images/pic5.jpg" class="item" alt="" title="" /><img id="productid_6" src="images/pic6.jpg" class="item" alt="" title="" /><img id="productid_7" src="images/pic7.jpg" class="item" alt="" title="" /><img id="productid_8" src="images/pic8.jpg" class="item" alt="" title="" /><img id="productid_9" src="images/pic9.jpg" class="item" alt="" title="" />
</div>
<div style="clear:both;"></div>
<div id="start">Waiting...</div>
<div id="stop">Waiting...</div>
<div id="hover">Waiting...</div>
<div id="stop2">Waiting...</div>
<div id="test">Waiting...</div>
</body>
</html>
Maintenant, je viens de comprendre comment obtenir le droit des placements des images quand ils ont été déplacés plus d'une fois. Il semble que la position: relative est automatiquement ajoutée à draggables et causer des ennuis dans le calcul des positions: (
