个人中心
gpt4 book ai didi

javascript - 无法掉落超过 1 个克隆

转载 作者：行者123 更新时间：2023-11-28 10:07:27 24 4
gpt4 key购买 nike

以下代码仅允许我将一个克隆拖放到可放置区域。当我尝试将另一个克隆放在可放置区域时，它会消失。不过我可以拖动它。

        $(".shape").draggable({
                        helper: 'clone',
                    });

                $("#wrapper").droppable({
                    accept: '.shape',
                    drop: function(event, ui) 
                    {
                        $(this).append($(ui.helper).clone());
                        $("#wrapper .shape").addClass("item");
                        $(".item").removeClass("ui-draggable shape");
                        $(".item").draggable();
                    }
                });

根据人们的评论和下面提供的 jfiddle，这段代码似乎在典型的设置中工作，但是，我将其与 Phonegap 结合使用，更具体地说是在 Android 设备上。

我知道这对于其他人来说更具体且更难以复制，但由于某种原因，它不允许我将另一个克隆拖到包装器上。

这是我的完整代码，如果有人能发现一些东西，我将非常感激!

<!DOCTYPE HTML>
<html>
    <head>
        <title>Title</title>
            <script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
            <script src="jquery-1.7.min.js"></script>
            <script src="jquery-ui-1.8.16.custom.min.js"></script>
            <link rel="stylesheet" type="text/css" href="ff.css" />
            <script type="text/javascript" charset="utf-8">

                // Wait for PhoneGap to load
                document.addEventListener("deviceready", onDeviceReady, false);

                // PhoneGap is ready
                function onDeviceReady() {

                var mouseEventTypes = {
                        touchstart : "mousedown",
                        touchmove : "mousemove",
                        touchend : "mouseup"
                        };

                        for (originalType in mouseEventTypes) {
                        document.addEventListener(originalType, function(originalEvent) {

                            event = document.createEvent("MouseEvents");
                            touch = originalEvent.changedTouches[0];
                            event.initMouseEvent(mouseEventTypes[originalEvent.type], true, true,
                                    window, 0, touch.screenX, touch.screenY, touch.clientX,
                                    touch.clientY, touch.ctrlKey, touch.altKey, touch.shiftKey,
                                    touch.metaKey, 0, null);
                            originalEvent.target.dispatchEvent(event); 
                            originalEvent.preventDefault();
                                });
                            }

                    $(".shape").draggable({
                            helper: 'clone',
                        });

                    $("#wrapper").droppable({
                        accept: '.shape',
                        drop: function(event, ui) 
                        {
                            $(this).append($(ui.helper).clone());
                            $("#wrapper .shape").addClass("item");
                            $(".item").removeClass("ui-draggable shape");
                            $(".item").draggable();
                        }
                    });

                    $(".show").live('touchstart', function() {

     if ($("#openCloseIdentifier").is(":hidden")) {
            $("#slider").animate({ 
                marginLeft: "-150px"
                }, 500 );
            $("#openCloseIdentifier").show();

        } else {
            $("#slider").animate({ 
                marginLeft: "0px"
                }, 1000 );
       $("#openCloseIdentifier").hide();
    }
                    });


                    }//onDeviceReady

            </script>
    </head>
        <body>
        <div id="wrapper">
            <div id="navWrap">
                <div id="openCloseIdentifier"></div>
                <div id="slider">
                 <div id="sliderContent">
                    <img class="shape" src="images/150x150.gif" />
                </div>
                <div id="openCloseWrap">
                    <a href="#" class="topMenuAction" id="topMenuImage">
                        <img src="images/show.gif" class="show" />
                    </a>
                </div>
                </div>
            </div>
        </div>
        </body>
</html>

最佳答案

想通了。

我在包装 div 中克隆了嵌套的形状。那是行不通的。

拿出来就可以了!

关于javascript - 无法掉落超过 1 个克隆，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7999528/

24 4 0
文章推荐： css - GWT:如何在同一个 ClientBundle 的另一个样式表中访问一个样式表中定义的常量
文章推荐： html - 不 float 在同一条线上，如何修复 css
文章推荐： asp.net - Silverlight 控件停留在 div 之上？无法使用 Windowless 模式且 z-index 不工作
文章推荐： html - W3 验证 HTML 错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com