2011-11-03 76 views
1

以下代码将只允许我将一个克隆拖放到可放置区域。当我尝试在可丢弃区域放弃另一个克隆时,它会消失。但我可以拖动它。不能删除多个克隆

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

请将您的HTML – jbabey

+0

看不见它:http://jsfiddle.net/7Fa35/ –

回答

0

想通了。

我已经在包装div中克隆了nester的形状。这是行不通的。

拿出来,它的工作原理!