Question

我是javascript的新手。下面是我的拖放html。恢复不正常。请帮助我为什么它不能正常工作。

还原之前还原工作正常，但不会返回原始位置

        <!DOCTYPE html>
    <html  ng-app="first22">
        <head>
            <link rel="icon" type="image/png" href="globe/images/correct.png"/>
            <link rel="stylesheet" type="text/css" href="globe/css/style.css"/>     
            <script type="text/javascript" src="globe/script/jquery.js"></script>
                <script type="text/javascript" src="globe/script/jquery-ui.js"></script>
            <title>
                Html5 All in One
            </title>
            <style>
                *{padding:0;margin:0}
                #interactive
                {
                    position:absolute;
                    width:895px;
                    height:695px;
                    margin:auto;
                    left:0;
                    right:0;
                    background:#f3f3f3;
                }

                .dragbg,.drop
                {
                    position:absolute;
                    width:171px;
                    height:52px;
                    background:#c0c0c0;
                    font-size:20px;
                    border-radius:25px;
                    text-align:center;
                }

                .drag
                {
                    width:160px;
                    height:40px;
                    background:#c2c2c2;
                    border:1px solid;
                    font-size:20px;
                    border-radius:25px;
                    text-align:center;
                    position:absolute;
                    margin-top:5px;
                    margin-left:5px;
                    line-height:40px;
                    cursor:pointer;
                }

                .drag:hover
                {
                    background:#fff;
                }
                .drop1
                {
                    width:160px;
                    height:40px;
                    background:#c2c2c2;
                    border:1px solid;
                    font-size:20px;
                    border-radius:25px;
                    text-align:center;
                    position:absolute;
                    top:5px;
                    left:5px;
                    line-height:40px;
                    cursor:pointer;
                }
            </style>
        </head>
        <body>
            <div id="interactive">
                <div style="position:absolute;left:0px;top:50px;width:100%;text-align:center;font-size:28px;font-weight:bold">Common Drag and Drop</div>

                <div class="dragbg" style="left:120px;top:150px;">
                     <div class="drag" >Meter</div>
                </div>
                <div class="dragbg" style="left:120px;top:220px;">
                     <div class="drag">MilliMeter</div>
                </div>
                <div class="dragbg" style="left:120px;top:290px;">
                     <div class="drag">CentiMeter</div>
                </div>
                <div class="dragbg" style="left:120px;top:360px;">
                     <div class="drag">Gram</div>
                </div>
                <div class="dragbg" style="left:120px;top:430px;">
                     <div class="drag">MilliGram</div>
                </div>
                <div class="dragbg" style="left:120px;top:500px;">
                     <div class="drag">KiloGram</div>
                </div>


                <div class="drop" style="left:320px;top:150px;">

                </div>             
                <div class="drop" style="left:320px;top:220px;">

                </div>             
                <div class="drop" style="left:320px;top:290px;">

                </div>             
                <div class="drop" style="left:320px;top:360px;">

                </div>             
                <div class="drop" style="left:320px;top:430px;">

                </div>             
                <div class="drop" style="left:320px;top:500px;">

                </div>

            </div>      
        </body>
        <script>
        $("document").ready(function()
        {
            $(".drag").draggable(
            {
                containment:"#interactive",
                revert:function(event,ui)
                {
                    $(this).data("uiDraggable").originalPosition=
                    {
                        left:0,
                        top:0
                    };
                    return !event;
                },
                zindex:1000,
                drag:function(event,ui)
                {
                    $(this).css("z-index",2000);
                }
            });

            $(".drop").droppable(
            {
                drop:function(event,ui)
                {
                    $(this).append(ui.draggable)
                    $(this).find(".drag").each(function()
                    {
                        $(this).css("position","absolute");
                        $(this).css({"top":"0px","left":"0px"});
                    });
                }
            });

        })          
        </script>
    </html>

Answer 1

您正在将拖动附加到其占位符，从而更改拖动对象的父级。所以它改变了它与新容器的关系。您只需移动拖动的位置，将其保持在其父容器中。此外，您必须相对于其容器定位div。

            $(".drop").droppable(
            {
                drop:function(event,ui)
                {
                    var pos = $(this).offset();
                    var ppos = $(ui.draggable).parent().offset();
                    var left = pos.left - ppos.left;
                    var top = pos.top - ppos.top;
                    $(ui.draggable).css({"left" : left, "top": top})
                    $(this).find(".drag").each(function()
                    {
                        $(this).css("position","absolute");
                        $(this).css({"top":"0px","left":"0px"});
                    });
                }
            });

您的小提琴已更新http://jsfiddle.net/XSXA6/18/

Answer 2

我认为这种行为是因为您在droppable中附加了draggable，因此更改了位置坐标。你不需要在可投放初始化中做任何事情，它会起作用。

演示：http://jsfiddle.net/XSXA6/15/

JS：

$(document).ready(function () {
    $(".drag").draggable({
        containment: "#interactive",
        revert: function (event, ui) {
            $(this).data("uiDraggable").originalPosition = {
                left: 0,
                top: 0
            };
            return !event;
        },
        zindex: 1000,
        drag: function (event, ui) {
            $(this).css("z-index", 2000);
        }
    });
    $(".drop").droppable({
    drop: function (event, ui) {
        console.log(ui.draggable, $(this));
        var d = $(this)
        $(ui.draggable).position({
            my: "center",
            at: "center",
            of: d
        });
      }
   });
  });

拖放不正常

2 个答案: