多個div中的jQuery可拖動/可放置div

Question

我想創建一個表格，其中每個單元格可以包含可以在其他單元格中拖放的元素（div）。 看來，該元素可以只刪除原始div。 我不明白爲什麼它不起作用。

<style> 
.over { 
    border: solid 4px #ACFA58; 
} 
.draggable { 
    border: solid 4px red; 
    width:150px; 
    height:75px; 
} 
#timetable{ 
    margin-top:50px; 
    width:100%; 
    border-collapse:collapse; 
    border: 1px solid black; 
} 
#timetable th{ 
    text-align:center; 
} 
#timetable td{ 
    width:150px; 
    height:75px; 
    border: 1px solid black; 
} 
</style> 


<script> 
$(document).ready(function() { 
    $(".draggable").draggable({ 
     cursor: "crosshair", 
     revert: "invalid" 
    }); 

    $(".drop").droppable({ 
     accept: ".draggable", 
     drop: function(event, ui) { 
      console.log("drop"); 
      $(this).removeClass("border").removeClass("over"); 
      var dropped = ui.draggable; 
      var droppedOn = $(this); 
      $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);  
     }, 
     over: function(event, elem) { 
      $(this).addClass("over"); 
      console.log("over"); 
     }, 
     out: function(event, elem) { 
      $(this).removeClass("over"); 
     } 
    }); 

    $(".drop").sortable(); 
}); 
</script> 

<div id="page-wrapper"> 
    <table id="timetable" > 
      <thead> 
       <tr> 
        <th>1</th> 
        <th>2</th> 
        <th>3</th> 
        <th>4</th> 
        <th>5</th> 
        <th>6</th> 
        <th>7</th> 
       </tr> 
      </thead> 
      <tbody id="containment"> 
       <tr> 
        <td><div class="drop"><div class="draggable"></div></div></td> 
        <td><div class="drop"></div></td> 
        <td><div class="drop"></div></td> 
        <td><div class="drop"></div></td> 
        <td><div class="drop"></div></td> 
        <td><div class="drop"></div></td> 
        <td><div class="drop"></div></td> 
       </tr> 
       <tr> 
        <td><div class="drop"></div></td> 
        <td><div class="drop"></div></td> 
        <td><div class="drop"></div></td> 
        <td><div class="drop"></div></td> 
        <td><div class="drop"></div></td> 
        <td><div class="drop"></div></td> 
        <td><div class="drop"></div></td> 
       </tr> 
      </tbody> 
     </table> 
</div><!-- /#page-wrapper --> 

Answer 1

您的問題是您的目標div s沒有高度。我稍微編輯了一段代碼，以便使用activeClass，以便看到顏色。通過在td div而不是僅.draggable上設置寬度&，它可以按預期工作。

$(document).ready(function() { 
 
    $(".draggable").draggable({ 
 
     cursor: "crosshair", 
 
     revert: "invalid" 
 
    }); 
 

 
    $(".drop").droppable({ 
 
     accept: ".draggable", 
 
     activeClass: "over", 
 
     drop: function(event, ui) { 
 
      console.log("drop"); 
 
      $(this).removeClass("border").removeClass("over"); 
 
      var dropped = ui.draggable; 
 
      var droppedOn = $(this); 
 
      $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);  
 
     } 
 
    }); 
 

 
    $(".drop").sortable(); 
 
});

.over { 
 
    border: solid 4px #ACFA58; 
 
} 
 
td div { 
 
    width:150px; 
 
    height:75px; 
 
} 
 
.draggable { 
 
    border: solid 4px red; 
 
} 
 
#timetable{ 
 
    margin-top:50px; 
 
    width:100%; 
 
    border-collapse:collapse; 
 
    border: 1px solid black; 
 
} 
 
#timetable th{ 
 
    text-align:center; 
 
} 
 
#timetable td{ 
 
    width:150px; 
 
    height:75px; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
 

 
<div id="page-wrapper"> 
 
    <table id="timetable" > 
 
      <thead> 
 
       <tr> 
 
        <th>1</th> 
 
        <th>2</th> 
 
        <th>3</th> 
 
        <th>4</th> 
 
        <th>5</th> 
 
        <th>6</th> 
 
        <th>7</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody id="containment"> 
 
       <tr> 
 
        <td><div class="drop"><div class="draggable"></div></div></td> 
 
        <td><div class="drop"></div></td> 
 
        <td><div class="drop"></div></td> 
 
        <td><div class="drop"></div></td> 
 
        <td><div class="drop"></div></td> 
 
        <td><div class="drop"></div></td> 
 
        <td><div class="drop"></div></td> 
 
       </tr> 
 
       <tr> 
 
        <td><div class="drop"></div></td> 
 
        <td><div class="drop"></div></td> 
 
        <td><div class="drop"></div></td> 
 
        <td><div class="drop"></div></td> 
 
        <td><div class="drop"></div></td> 
 
        <td><div class="drop"></div></td> 
 
        <td><div class="drop"></div></td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
</div><!-- /#page-wrapper -->