javascript - 拖放无法正常工作-6ren

javascript - 拖放无法正常工作

转载作者：行者123 更新时间：2023-12-03 12:13:12

27

4

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

最佳答案

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

你的 fiddle 已更新http://jsfiddle.net/XSXA6/18/

关于javascript - 拖放无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24858673/

27

4

0

文章推荐： sql - DBeaver，如何声明变量并使用它们？

文章推荐： wolfram-mathematica - Mathematica 中未知维度的符号矩阵

c# - 属性与 get 之间的区别；放;没有得到；放;
这个问题在这里已经有了答案: Difference between Property and Field in C# 3.0+ (10 个答案) 关闭 10 年前。我不明白静态属性之间的区别: p
jquery拖/放-获取被拖放的元素的id
当元素被拖放时，有没有办法从被拖动的元素中获取 id(或其他属性值)？例如，在左侧，我有一堆 div，我可以将图像放入其中。右边有一个 div 用来保存图像。当我将图像从右侧拖动到左侧的 div 时
c# - 获取问题；放;
每当我更改其中一个类属性时，我想设置一个修改标志，如下所示 public bool Modified { get; set; } public bool Enabled { get; set { Mo
C# HttpClient 放
由于某种原因，我下面的代码曾经可以正常工作，但现在却引发了一个异常: public static async Task HttpPut(string inUrl, string inFilePath)
javascript - 放；在函数定义的末尾
为什么将 ; 放在最佳实践中？在函数定义的末尾。例如 var tony = function () { console.log("hello there"); }; 优于: var tony
bitmap - EaselJS:有问题的拖/放
我在容器内有一个位图。当我拖动容器时，光标变为编辑文本形状，图像也跳到光标的右下角(好像我从左上角拿着图像并拖动它)。这是我的代码，所以你可以看到我有 RTFM: function createIc
c# - 表达式主体属性与 {get;放;}
这个问题已经有答案了: C# 3.0 auto-properties — useful or not? [closed] (17 个回答) 已关闭 6 年前。当我让 Visual Studio 20
c# - 多么简单的得到；放;在一个类意味着？
以类中的以下代码为例: public class Employee : IEntity { public string FirstName { get; set; } public s
javascript - 放(存)json数据
我有 json 数据: { "products": [ { "productId" : 0, "productImg" : "../img/product-ph
c# - { 得到;放; } 在变量声明中
这个问题在这里已经有了答案: What is the difference between a field and a property? (33 个答案) 关闭 9 年前。我在一本书上找到这样声
c# - 得到;放;变量
我正在设置多个方法，想知道如何继续将一个变量(“顶部”变量)传递给不同的方法。主要方法: public static void Main(string[] args) { i
bash - Hadoop Crontab 放
我正在尝试使用 crontab 编写一个简单的任务，将一些文件从本地复制到 HDFS。我的代码是这样的: #!/bing/ksh ANIO=$(date +"%Y") MES=$(date +"%m"
javascript - 限制 jQuery 中节点的拖/放？
有人可以告诉我如何使用这个解决方案来解决我的问题吗？我也想限制 id 中包含文本“not”的节点的拖/放。 jsTree drag and drop restrict folders by class
javascript - jquery sortable 禁用特定项目之间的拖/放
我的情况如下 - 我正在对可能包含链接行的表进行排序: row 1 row 2 row 3 row 4 row 5 我需要的是禁止在.linked-to-p
ASP.net AJAX 拖/放？
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表，我希望用户能够通过拖放对列表进行重新排序。此外，我希望有第二个列表，用户可以将第一个列表中的项目拖到其中。到
scheme - 放!并在 Scheme 中别名
我在理解似乎不一致的方案中的破坏性操作时遇到问题。即为什么下例中bar没有变化 (define foo '(a b)) (define bar foo) (set! foo '(c d)) foo >
ASP.net AJAX 拖/放？
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表，我希望用户能够通过拖放对列表进行重新排序。此外，我希望有第二个列表，用户可以将第一个列表中的项目拖到其中。到
scheme - 放!并在 Scheme 中别名
我在理解似乎不一致的方案中的破坏性操作时遇到问题。即为什么下例中bar没有变化 (define foo '(a b)) (define bar foo) (set! foo '(c d)) foo >
c# - 如何使 ModalPopup 拖/放
我在我的 Web 应用程序中使用 Ajax ControlToolkit 中的 ModalPopupExtender。我将其 Drag 属性设置为 true，但是当我拖动弹出面板并将其放到新位置时，它
jQuery UI 拖/放，捕捉到底部
所以，基于this answer ，我有一组可以拖放并卡入到位的 div。唯一的问题是，可拖动的 div 具有不同的高度，我需要它们始终捕捉到目标的底部，而不是顶部。您可以在this JsFiddl

首页

博学

6Ren·AI

商城

javascript - 拖放无法正常工作