2
Ne laissez pas le code ci-dessous vous effrayer. La question est vraiment simple, seulement deux lignes font problème:jquery: Variables return NaN
Pourquoi mon code a généré un code d'erreur NaN? J'essaie de soustraire une valeur de variable d'une autre afin que la position des éléments soit correcte.
Les variables ont leur valeur de jQuery position() qui est censée être entière de toute façon.
Vérifiez 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>
Je me demande aussi - quel est le point d'initialiser Stoppos et Startpos à un tableau? Pourquoi ne pas les laisser non initialisés ou setting = null? – jlarson
Hmmm ... Qu'est-ce qui me dérange est que remplaçant: var posTop = Startpos.top - Stoppos.top; var posLeft = Startpos.left - Stoppos.left; Avec: var = postop Startpos.top; var posLeft = Startpos.left; Fonctionne même si les chiffres ne sont pas ce que je voulais. – Cudos
initialisation Stoppos et Startpos les rend disponibles dans le périmètre global. Mais je suis nouveau pour les variables globales en javascript. Juste essayé quelque chose qui semblait fonctionner. – Cudos