2
以下のコードではあなたを怖がらせないでください。問題は本当にシンプルですが、2行だけで問題が発生しています。jquery：変数NaNを返します
なぜコードでNaNエラーコードが生成されましたか？私は別の変数の値を1つ引くことを試みているので、要素の位置は正しいでしょう。
変数はjQueryのposition（）から値を得ました。これは整数であるはずです。
チェック行これらの行：
// 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;
完全なコード：
<!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>
StopposとStartposを配列に初期化する際のポイントは何ですか？それらを初期化しないままにするか、またはnullに設定するのはなぜですか？ – jlarson
Hmmm ...私を困惑させるのは、置き換えます： var posTop = Startpos.top - Stoppos.top; VAR posLeft = Startpos.left - Stoppos.left; 付： VAR術後= Startpos.top; VAR posLeft = Startpos.left; 数字が私のものではないにもかかわらず動作します。 StopposとStartposを初期化する – Cudos
は、それらをグローバルスコープで利用できるようにします。しかし、私はjavascriptでグローバル変数に新しいです。ちょうどうまくいったものを試しました。 – Cudos