Question

我有以下独立的测试页面：

<!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")）。

任何帮助？

Answer 1

我刚刚写完了类似的东西。由于您没有在块上定义css位置，因此它们默认为相对。通过offset（）或position（）传递坐标会导致“错误答案”，因为所有坐标都相对于父div。你想要做的是在动画调用中相对移动块（“+ = _ px”或“ - = _px”。

我所做的是找到desitination和origin之间的区别，并适当调整动画调用。此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")

动画元素到它的当前位置会将其移动到其他位置

1 个答案: