2011-11-03 3 views
1

다음 코드는 하나의 복제를 끌어서 놓기 영역에만 끌어다 놓을 수있게합니다. droppable 영역에 다른 복제본을 놓으려고하면 사라집니다. 나는 그러나 그것을 끌 수 있습니다. 이 코드 조각은 안드로이드 장치에 더 구체적으로 폰갭과 함께하지만, 내가 이것을 사용하고, 일반 설정에서 작업하고있는 것처럼 사람들의 의견과 아래에 제공된 jfiddle 다음둘 이상의 복제를 삭제할 수 없습니다.

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

, 그것은 나타납니다 .

나는 이것이 다른 사람들을 위해보다 구체적이고 복제하기가 더 어렵다는 것을 알고 있지만 어떤 이유로 복제본을 다른 래퍼로 드래그 할 수 없다.

누군가가 뭔가를 발견 할 수 있다면 여기에 전체 코드가 있습니다. 정말 고맙습니다.

<!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에 네 스터가 복제 된 모양이 있습니다. 그것은 작동하지 않습니다.

밖으로 찍어서 작동합니다!

관련 문제