Анимирование элемента в его текущем положении перемещает его куда-то еще - PullRequest
Новая
       1

Анимирование элемента в его текущем положении перемещает его куда-то еще

0 голосов
/ 23 февраля 2011

У меня есть следующая автономная тестовая страница: 

<!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" >
<head>
    <title>Drag Tests</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript"></script>

    <style type="text/css">
        #leftColumn
        {
            float: left;
            width: 200px;
            border-right: 1px solid gray;
            background-color: #EEE;
        }

        #mainArea
        {
            float: left;
            width: 600px;
            background-color: #BBB;
        }

        .draggable
        {
            width: 120px;
            height: 1em;
            border: 1px solid gray;
            text-align: center;
            vertical-align: middle;
            margin: 20px auto;
            padding: 1em;
            background-color: White;
        }

        .dropArea
        {
            width: 140px;
            height: 1.3em;
            border: 1px solid #CCC;
            text-align: center;
            vertical-align: middle;
            margin: 20px auto;
            padding: 1em;
            background-color: White;
        }

        .hoverClass
        {
            border-color: Red;
        }

    </style>
    <script type="text/javascript" language="javascript">
        $(function () {
            $(".draggable").each(function () {
                var myElem = $(this);
                myElem.data("OldLeft", myElem.offset().left).data("OldTop", myElem.offset().top);
                myElem.animate({ "left": myElem.get(0).offsetLeft, "top": myElem.get(0).offsetTop }, "fast"); //added to test
            });
            $(".draggable").draggable({ revert: "invalid" });
            $("#dropArea1").droppable({ hoverClass: "hoverClass" });
            $("#leftColumn").droppable({
                drop: function (event, ui) {
                    var myElem = ui.draggable;
                    myElem.animate({ "left": myElem.data("OldLeft") + "px", "top": myElem.data("OldTop") + "px" }, "fast");
                }
            });

        });
    </script>
</head>
<body>
    <div id="leftColumn">
        <div class="draggable">Block 1</div>
        <div class="draggable">Block 2</div>
        <div class="draggable">Block 3</div>
    </div>
    <div id="mainArea">
        <div id="dropArea1" class="dropArea"></div>
    </div>
</body>
</html>

При обновлении этой страницы три блока слева перемещаются, однако они устанавливаются в свои текущие позиции.Я пробовал различные способы получения их текущей позиции (.postion(), .offset(), .attr("offsetLeft")).

Любая помощь?

1 Ответ

1 голос
/ 23 февраля 2011

Я только что закончил писать что-то подобное.Поскольку вы не определили позицию css для блоков, по умолчанию они являются относительными.Передача координат через offset () или position () приводит к «неправильному ответу», так как все координаты относятся к родительскому div.Что вы хотите сделать, это переместить блоки относительно ("+ = _ px" или "- = _px) в вашем одушевленном вызове.

Что я сделал, так это нашел разницу междуназначение и происхождение, и отрегулируйте анимационный вызов соответствующим образом. Этот fcn предполагает, что пункт назначения выше (ymmv); 

function moveVidToDrop(dragItem, dropItem) {
    var deltaTop = dropItem.offset().top - dragItem.offset().top;
    var deltaleft = dropItem.offset().left - dragItem.offset().left;
    var dirTop = '+=';
    var dirLeft = '+=';

    if (deltaTop < 0) {
        dirTop = "-=";
        deltaTop = Math.abs(deltaTop);
    }

    if (deltaleft < 0) {
        dirLeft = "-=";
        deltaleft = Math.abs(deltaleft);
    }

    dragItem.animate({ top: dirTop + deltaTop, left: dirLeft + deltaleft }, 0);
}

Аналогично, если вы хотите отправить перетаскиваемый программно домой, сделайте: 

.animate({ left: "0px", top: "0px" }, "slow")
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...