jQuery 드래그 앤 드롭 UI 제한 컨테이너 호버 1 IMG

기본 드래그 앤 드롭 인쇄 친화적 포토 갤러리를 만들려고합니다. 나는 사용자가 10 장의 사진을 찍어서 어쨌든 원하는대로 정리 한 다음 인쇄 할 수있게하고 싶다. 아래의 코드는 기본 드래그 앤 드롭을 사용하여 사진/img를 div에 넣지 만 div만으로는 사진 1 장만 허용 할 수 없습니다.jQuery 드래그 앤 드롭 UI 제한 컨테이너 호버 1 IMG

img가 이미지와 함께 div 위에 놓일 때 어떻게 수정하여 놓을 수 있습니까? 비활성화 기능을 시도했지만 항목을 삭제하고 다시 이동하면 아무 것도 그 자리로 되돌아 갈 수 없습니다. enable 함수는이를 수정하지 않습니다.

도움말

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 

    <script type="text/javascript"> 
    $(document).ready(function(){ 
     var count = 0; 
     $(".shirts").draggable({helper: 'clone'}); 
     $(".drop").droppable({ 
     accept: ".shirts", 
     activeClass: 'droppable-active', 
     hoverClass: 'droppable-hover', 
      drop: function(ev, ui) { 
       $(this).append(ui.draggable);  
    //   $(this).droppable('disable'); 
    //   $(this).droppable('enable'); 
      } 
     }); 
    }); 
      </script> 
     <style type="text/css"> 
     .drop{width:100px;min-height:109px;float:left;} 
     .allshirts{width:100%;border:1px solid #eee;min-height:140px;} 
     .shirts{float:left;width:100px;} 
     .blanket{width:510px;min-height:140px;margin:0px;padding:0px;} 
     .droppable-hover{background:#000;} 
     .clear{clear:both;} 
     </style> 

</head> 
<body> 
    <div class="allshirts drop"> 
     <img class="shirts" src="images/tshirt_thumb1_thumb.png" /> 
     <img class="shirts" src="images/tshirt_thumb2_thumb.png" /> 
     <img class="shirts" src="images/tshirt_thumb3_thumb.png" /> 
     <img class="shirts" src="images/tshirt_thumb4_thumb.png" /> 
     <img class="shirts" src="images/tshirt_thumb1_thumb.png" /> 
     <img class="shirts" src="images/tshirt_thumb2_thumb.png" /> 
     <img class="shirts" src="images/tshirt_thumb3_thumb.png" /> 
     <img class="shirts" src="images/tshirt_thumb4_thumb.png" /> 
     <img class="shirts" src="images/tshirt_thumb1_thumb.png" /> 
     <img class="shirts" src="images/tshirt_thumb2_thumb.png" /> 
     <img class="shirts" src="images/tshirt_thumb3_thumb.png" /> 
     <img class="shirts" src="images/tshirt_thumb4_thumb.png" /> 
    </div> 
    <div class="clear"></div> 
    <div class="blanket"> 
     <table cellpadding="0" cellspacing="0" border="1"> 
       <td><div id="photo1" class="drop"></div></td> 
       <td><div id="photo2" class="drop"></div></td> 
       <td><div id="photo3" class="drop"></div></td> 
       <td><div id="photo4" class="drop"></div></td> 
       <td><div id="photo5" class="drop"></div></td> 
      </tr> 
      <tr> 
       <td><div id="photo6" class="drop"></div></td> 
       <td><div id="photo7" class="drop"></div></td> 
       <td><div id="photo8" class="drop"></div></td> 
       <td><div id="photo9" class="drop"></div></td> 
       <td><div id="photo10" class="drop"></div></td> 
      </tr> 

     </table> 
    </div> 

</body> 
</html>

출처

2009-11-17 John

원유를 :(하지만 간단하십시오.

나는 또한 당신이 그 (것)들을 재 배열하고 자신의 선택을 무시하게 할 것으로 가정

그래서 나는 원래 요소의 복제를 추가

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 

    <script type="text/javascript"> 
    $(document).ready(function(){ 
     var count = 0; 
     $(".shirts").draggable({helper: 'clone'}); 
     $(".drop").droppable({ 
     accept: ".shirts", 
     activeClass: 'droppable-active', 
     hoverClass: 'droppable-hover', 
       drop: function(ev, ui) { 
     if ($(this).html() == ""){ 
        $(this).append($(ui.draggable).clone());   
     }else{ 
      $(this).empty().append($(ui.draggable).clone()); 
     } 
       } 
     }); 
    }); 
       </script> 
     <style type="text/css"> 
     .drop{width:100px;min-height:109px;float:left;} 
     .allshirts{width:100%;border:1px solid #eee;min-height:140px;} 
     .shirts{float:left;width:100px;} 
     .blanket{width:510px;min-height:140px;margin:0px;padding:0px;} 
     .droppable-hover{background:#000;} 
     .clear{clear:both;} 
     </style> 

</head> 
<body> 
    <div class="allshirts drop"> 
     <img class="shirts" src="images/tshirt_thumb1_thumb.png" /> 
     <img class="shirts" src="images/tshirt_thumb2_thumb.png" /> 
     <img class="shirts" src="images/tshirt_thumb3_thumb.png" /> 
     <img class="shirts" src="images/tshirt_thumb4_thumb.png" /> 
     <img class="shirts" src="images/tshirt_thumb1_thumb.png" /> 
     <img class="shirts" src="images/tshirt_thumb2_thumb.png" /> 
     <img class="shirts" src="images/tshirt_thumb3_thumb.png" /> 
     <img class="shirts" src="images/tshirt_thumb4_thumb.png" /> 
     <img class="shirts" src="images/tshirt_thumb1_thumb.png" /> 
     <img class="shirts" src="images/tshirt_thumb2_thumb.png" /> 
     <img class="shirts" src="images/tshirt_thumb3_thumb.png" /> 
     <img class="shirts" src="images/tshirt_thumb4_thumb.png" /> 
    </div> 
    <div class="clear"></div> 
    <div class="blanket"> 
     <table cellpadding="0" cellspacing="0" border="1"> 
         <td><div id="photo1" class="drop"></div></td> 
         <td><div id="photo2" class="drop"></div></td> 
         <td><div id="photo3" class="drop"></div></td> 
         <td><div id="photo4" class="drop"></div></td> 
         <td><div id="photo5" class="drop"></div></td> 
       </tr> 
       <tr> 
         <td><div id="photo6" class="drop"></div></td> 
         <td><div id="photo7" class="drop"></div></td> 
         <td><div id="photo8" class="drop"></div></td> 
         <td><div id="photo9" class="drop"></div></td> 
         <td><div id="photo10" class="drop"></div></td> 
       </tr> 

     </table> 
    </div> 

</body> 
</html>

출처

2009-11-17 17:18:12 Phil

고마워요. 제가 찾고있는 사진이 아니지만, 어떤 사진이 클래스 = "allshirts"에서 사용되었는지 보여 주어야합니다. 각 셔츠는 사용 된대로 제거해야하므로 각 사진이중복되지는 않지만 한 번만 표시되고 한 번만 화면에 표시됩니다. 나는 ($ this) droppable ('disable')을 사용할 수 있다고 확신하지만 뭔가를 놓친다는 것을 안다. – John

삭제 된 이미지를 제거하려면 원본 ui.draggable로 $ (ui.draggable) .clone()을 교체하십시오. – Phil

jQuery 드래그 앤 드롭 UI 제한 컨테이너 호버 1 IMG

답변

관련 문제