多種類型的可拖動多個droppables jQuery的

我想創建一個三個箱，其中圖像可以根據自己的類型 TYPE1圖像binA中...... TYPE2圖像binB type3images到BINC多種類型的可拖動多個droppables jQuery的

幫我拖解決這個問題我的錯誤是可放開只在只有一個......人是不接受的項目 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/

來源

2014-01-13 Manish Jung Thapa

ü可以創建的jsfiddle？ –

http://jsfiddle.net/JuA5P/ 這裏是我的jsfiddle .. –

你droppables沒有高度，這是不可能的可拖動圖像拖放到他們。

給他們一些高度

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

        </div>

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

來源

2014-01-13 11:41:17

多種類型的可拖動多個droppables jQuery的

回答

相關問題