jquery：变量返回NaN

时间：2009-05-13 12:34:55

标签： jquery variables position

不要让下面的代码吓跑你。问题很简单，只有两条线路出现问题：

为什么我的代码会生成NaN错误代码？我试图从另一个变量值中减去一个变量值，因此元素的位置是正确的。

变量从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>

6 个答案:

答案 0 :(得分：4)

问题是droppable.drop（）在 draggable.stop（）之前被称为。所以你的Stoppos尚未计算。

处理此问题的一种方法是简单地跟踪正在拖动的项目，并在droppable.drop（）中计算该项目的位置。例如（代码的子集），注意“拖动”对象。

$(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;
                }
        });

然而，可能还有其他一些合法的方法。

答案 1 :(得分：1)

据我所知，position（）不是jQuery函数。

请改为尝试：

Startpos = $(this).offset();

然后，您应该可以访问顶部和左侧属性。

答案 2 :(得分：0)

你确定这些是引起问题的线路吗？ -

请你确认“var posTop = Startpos.top - Stoppos.top;”

将有效的Integer / Double值返回给posTop？上周我在我的一个项目上进行了编码并遇到了同样的NaN问题，我试图将值解析为Integer并且它有效。

因为您正在进行数学计算，请尝试在将值减去之前将值解析为Double / Int，

有时，解决方案非常简单，我们往往会使其过于复杂。

如果Parsing不起作用，可能是您没有从数组中传入正确的值。试试像Startpos [0] .Top

这样的东西

希望这有帮助，祝你好运！

答案 3 :(得分：0)

当您执行此计算时，Startpos或Stoppos仍然只是一个空数组。

尝试将它们设置为合适的默认值（0,0），因为这可以更容易地追踪误入歧途的内容。

答案 4 :(得分：0)

令我困惑的是，这有效：

取代：

var posTop = Startpos.top - Stoppos.top;
var posLeft = Startpos.left - Stoppos.left;

使用：

var posTop = Startpos.top;
var posLeft = Startpos.left;

即使数字不是我想要的，也能工作。由于某些原因，似乎简单的减法无效。

答案 5 :(得分：0)

感谢帮助人员：）

发现问题。

Stoppos = $(this).position();

不应该在：

$(".item").draggable({
stop: function(event, ui) {

但改为：

$(".item").droppable({
drop: function(event, ui) {

完整代码： 

<!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>

现在，我必须弄清楚如何在移动图像多次时才能正确放置图像。看起来这个位置：相对会自动添加到draggables并在计算位置时遇到麻烦：（

相关问题
最新问题