2

不要让下面的代码吓跑你。这个问题真的很简单，只有两行很麻烦：

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

6 回答 6

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

但是，可能还有其他几种合法的方法可以解决这个问题。

于 2009-05-13T12:49:43.963 回答
1

据我所知 position() 不是 jQuery 函数。

试试这个：

Startpos = $(this).offset();

然后，您应该能够访问 top 和 left 属性。

于 2009-05-13T12:41:04.927 回答
0

你确定这些是导致问题的线路吗？-

你能确认一下“var posTop = Startpos.top - Stoppos.top;”

向 posTop 返回一个有效的整数/双精度值？上周我正在编写我的一个项目并且遇到了同样的 NaN 问题，我尝试将值解析为 Integer 并且它起作用了。

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

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

如果解析不起作用，则可能是您没有从数组中传递正确的值。尝试类似 Startpos[0].Top

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

于 2009-05-13T13:04:04.920 回答
0

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

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

于 2009-05-13T13:14:35.090 回答
0

令我困惑的是，这有效：

代替：

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

和：

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

即使数字不是我想要的，也会起作用。由于某种原因，简单的减法似乎无效。

于 2009-05-13T13:24:29.177 回答
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>

现在我只需要弄清楚如何在图像被多次移动时正确放置它们。似乎 position:relative 会自动添加到可拖动对象中，并且在计算位置时会遇到麻烦:(

于 2009-05-13T14:35:51.700 回答