Question

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

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

Answer 1

想出来。

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

拿出来，它的确有效！

不能删除多个克隆

1 个答案: