jquery: переменные возвращают NaN - PullRequest
Новая
       29

jquery: переменные возвращают NaN

2 голосов
/ 13 мая 2009

Не позволяйте приведенному ниже коду отпугнуть вас . Вопрос действительно прост, только две строки создают проблемы:

Почему мой код сгенерировал код ошибки 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 ]

4 голосов
/ 13 мая 2009

Проблема в том, что droppable.drop () вызывается перед draggable.stop (). Так что ваши Стоппос еще не рассчитаны.

Один из способов справиться с этим - просто отследить, какой элемент перетаскивается, и рассчитать позицию для него в 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 голос
/ 13 мая 2009

Насколько я знаю, position () не является функцией jQuery.

Попробуйте вместо этого: 

Startpos = $(this).offset();

После этого вы сможете получить доступ к верхним и левым свойствам.

0 голосов
/ 13 мая 2009

Спасибо за помощь, ребята:)

Нашел проблему. 

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>

Теперь мне просто нужно выяснить, как правильно расположить изображения, когда они были перемещены более одного раза. Кажется, что позиция: относительная автоматически добавляется к перетаскиваемым объектам и затрудняет расчет позиций: (* ​​1017 *

0 голосов
/ 13 мая 2009

Что меня удивляет, так это то, что это работает:

заменить: 

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

С: 

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

Будет работать, даже если цифры не те, что я хочу. Кажется, что простая вычитание по какой-то причине недопустима.

0 голосов
/ 13 мая 2009

Когда вы приходите выполнить это вычисление, либо Startpos, либо Stoppos все еще являются пустым массивом.

Попробуйте вместо этого установить для них подходящее значение по умолчанию (0, 0), поскольку это может упростить отслеживание того, что сбивается.

0 голосов
/ 13 мая 2009

вы уверены, что именно эти строки вызывают проблему? -

Не могли бы вы подтвердить, что "var posTop = Startpos.top - Stoppos.top;"

возвращает действительное значение типа Integer / Double в posTop? На прошлой неделе я писал код для одного из моих проектов, и у меня была та же проблема с NaN, я пытался разобрать значение в Integer, и это сработало.

Поскольку вы делаете математические вычисления, попробуйте разобрать значения в Double / Int, прежде чем вычесть их,

Иногда решение довольно простое, и мы склонны усложнять его.

Если синтаксический анализ не работает, возможно, вы не передаете правильное значение из массива. Попробуйте что-то вроде Startpos [0] .Top

Надеюсь, это поможет, удачи!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...