여러 유형의 JQuery와

Question

나는 이미지가 해당 유형 BINC

에 비나에 타입 1 이미지 ... binB의 type3images에 유형 2 이미지

도움이 나를에 따라 드래그 할 수있는 세 개의 쓰레기통을 만들려고하고 있어요 이 PLZ 여기

도움이 항목을 받아 내 오류가 있습니다 만 하나 ... 다른 사람되는 낙하 할 것입니다 그것을 해달라고 해결하는 것은 내 코드입니다

<div class="wrapper"> 
<center> 

    <table border="1"> 

     <tr> 
     <td> 
      <div class="dropholder0"> 
       <div id="dropable1"> 

       </div> 

      </div> 
     </td> 
     <td> 
      <div class="dropholder1"> 
       <div id="dropable2"> 

       </div> 
      </div> 
     </td> 
     <td> 
      <div class="dropholder2"> 
       <div id="dropable3"> 

       </div> 
      </div> 
     </td> 

     </tr> 

    </table> 
</center> 


<div class="photo-album"> 

    <h1><span>Drag these pictures to above bars</span></h1> 

    <a href="#" class="draggable large polaroid img1 type1"> 
     <img src="images/Pic21.png" alt=""> 
     <p>description or caption of this pic</p> 
    </a> 
    <a href="#" class="draggable medium polaroid img4 type2"> 
     <img src="images/Pic24.png" alt="type2"> 
     <p>type2</p> 
    </a> 

    <a href="#" class="draggable polaroid img6 type3"> 
     <img src="images/Pic26.png" alt=""> 
     <p>type 3</p> 
    </a> 
</div> 

그들에 드래그 이미지를 드롭 할 수 없었습니다 그래서

JQuery와 UI 기능을 사전에

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <script type="text/javascript"> 

(function() { 

    $(".draggable").draggable(); 
    $("#dropable1").droppable({ 
     activeClass: "small", 
     accept: ".type1", 
     drop: function(en,ui) { 
      console.log(ui); 
     } 


    }); 

    $("#dropable1").on("drop", function(event, ui) { 
     // ui.draggable.width('50'); 
     // ui.draggable.height('50'); 
     console.log(ui.draggable.attr('class')); 
     var allClass = ui.draggable.attr('class') 
     ui.draggable.removeClass(allClass); 
     ui.draggable.draggable('disable'); 
     ui.draggable.addClass('draggable small polaroid imageChanged'); 

    }); 

    $(".dropholder").find("#dropable2").droppable({ 
     activeClass: "small", 
     accept: ".type2", 
     drop: function(en,ui) { 
      console.log(ui); 
      console.log('type2') 


     }}); 

    $(".dropholder").find("#dropable2").on("drop", function(event, ui) { 
     console.log('type2'); 
     console.log(ui.draggable.attr('class')); 
     var allClass = ui.draggable.attr('class') 
     ui.draggable.removeClass(allClass); 
     ui.draggable.draggable('disable'); 
     ui.draggable.addClass('draggable small polaroid imageChanged'); 

    }); 

    $("#dropable3").droppable({ 
     activeClass: "small", 
     accept: ".type2", 
     drop: function(en,ui) { 
      console.log(ui); 
     } 


    }); 

    $("#dropable3").on("drop", function(event, ui) { 
     console.log(ui.draggable.attr('class')); 
     var allClass = ui.draggable.attr('class') 
     ui.draggable.removeClass(allClass); 
     ui.draggable.draggable('disable'); 
     ui.draggable.addClass('draggable small polaroid imageChanged'); 

    }); 

})(); 

감사합니다 :)

jsfiddle 링크 >>http://jsfiddle.net/JuA5P/

Answer 1

귀하의 droppables 더 높이 없었다.

그들에게 u는 jsfiddle을 만들 수있는 높이

<div id="dropable2" style="width: 200px; height:200px; border: 1px solid red"> 

        </div> 

http://jsfiddle.net/JuA5P/1/