Javascript 拖放操作无法正常工作_Javascript_Jquery

Javascript 拖放操作无法正常工作

javascript jquery

Javascript 拖放操作无法正常工作,javascript,jquery,Javascript,Jquery,我是javascript新手。下面是我的拖放html。恢复工作不正常。请帮助我为什么它不能正常工作下降前恢复工作正常，但不能恢复到原始位置 <!DOCTYPE html> <html ng-app="first22"> <head> <link rel="icon" type="image/png" href="globe/images/correct.png"/>

我是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>


Html5多功能一体机
*{填充：0；边距：0}
#互动的
{
位置：绝对位置；
宽度：895px；
身高：695px；
保证金：自动；
左：0；
右：0；
背景:#f3；
}
.dragbg、.drop
{
位置：绝对位置；
宽度：171像素；
高度：52px；
背景：#C0C0；
字体大小：20px；
边界半径：25px；
文本对齐：居中；
}
拖曳
{
宽度：160px；
高度：40px；
背景：#c2c2；
边框：1px实心；
字体大小：20px；
边界半径：25px；
文本对齐：居中；
位置：绝对位置；
边缘顶部：5px；
左边距：5px；
线高：40px；
光标：指针；
}
.拖动：悬停
{
背景：#fff；
}
.drop1
{
宽度：160px；
高度：40px；
背景：#c2c2；
边框：1px实心；
字体大小：20px；
边界半径：25px；
文本对齐：居中；
位置：绝对位置；
顶部：5px；
左：5px；
线高：40px；
光标：指针；
}
普通拖放
米
毫米
厘米
克
毫克
公斤
$（“文档”）.ready（函数（）
{
$（“.drag”）.draggable(
{
遏制：“互动”，
还原：功能（事件、用户界面）
{
$（此）.data（“uiDraggable”）.originalPosition=
{
左:0,，
排名：0
};
返回！事件；
},
zindex:1000，
拖动：函数（事件、ui）
{
$（本）.css（“z指数”，2000年）；
}
});
$（“.drop”）.dropable(
{
drop：函数（事件、用户界面）
{
$（this.append（ui.draggable）
$（this.find（“.drag”）.each（function（）
{
$（this.css（“位置”、“绝对”）；
$（this.css（{“top”：“0px”，“left”：“0px”}）；
});
}
});
})

我认为这种行为是因为您在可下拉列表中添加了可拖动列表，从而更改了位置坐标。您不需要在droppable初始化中执行任何操作，它将起作用

演示：

JS:

将拖动附加到其占位符，从而更改拖动对象的父对象。所以它改变了它与新容器的关系。您只需移动拖动的位置，使其保持在其父容器中。此外，还必须相对于其容器定位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"});
                    });
                }
            });

你的小提琴更新了

制作小提琴怎么样？js fiddle@bharath你想达到什么目的？请更清楚。问题是，如果将可拖动元件放置在可拖动元件之外，它会恢复到其原始位置。一旦我拖放到可拖放元素并再次拖放到可拖放元素的外部，它就不会返回到其原始位置，而是会返回到上次拖放的位置。为什么会发生这种情况？在拖放位置上，UIDRAGABLE可以拖动到可拖放元素的中心，您至少可以自己尝试该代码。因此，并不是为了完成你的代码，你可以得到指导和帮助，但不能得到完整的代码。无论如何，你可以检查更新后的答案，以确定拖拽的中心

            $(".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"});
                    });
                }
            });