Question

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

为什么我的代码会生成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>

Answer 1

问题是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; } });

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

Answer 2

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

请改为尝试：

Startpos = $(this).offset();

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

Answer 3

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

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

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

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

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

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

这样的东西

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

Answer 4

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

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

Answer 5

令我困惑的是，这有效：

取代：

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

使用：

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

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

Answer 6

感谢帮助人员：）

发现问题。

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并在计算位置时遇到麻烦：（

jquery：变量返回NaN

6 个答案: