2011-07-12 17 views
0

コンテンツをドラッグできますが、コンテンツをtdにドロップできません。私を助けてください。リストからコンテンツをドラッグしてtdにドロップすると、落としたアラートは表示されません。jqueryを使ってdroppableに問題があります

私のjqueryの:

$(".items").draggable({helper: 'clone'});  
    $(".droparea").droppable({ 
     accept: '.items', 
     drop: function(){ 
      alert('dropped') 

     } 

     }); 

はここで、リストからコンテンツをドラッグします。ここで

<div class="listOfTeacher fl"> 
<ul> 
<li class="items" id="1">Teacher1</li> 
<li class="items" id="2">Teacher2</li> 
<li class="items" id="3">Teacher3</li> 
<li class="items" id="4">Teacher4</li> 
</ul> 
</div> 

私はあなたのコードは私の作品

<table border="0" width="400" id="table" style=""> 
<tbody> 
<tr id="aa"> 
<td class="droparea br">&nbsp;</td> 
<td class="droparea br">&nbsp;</td> 
<td class="droparea br">&nbsp;</td> 
<td class="droparea br">&nbsp;</td> 
<td class="droparea br">&nbsp;</td> 
</tr> 
</tbody></table> 
+0

警告後にセミコロンはありません。確かにそれではない? –

+1

@マーク:セミコロンのステートメントターミネータは、JavaScriptでは実際はオプションです。 –

答えて

1

TDにコンテンツをドロップする必要があります。 jquery.droppable libがロードされていることを確認してください。テーブル境界= 0も機能します。

<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery-ui.js"></script> 
<script type="text/javascript"> 
$().ready(function() { 
    $(".items").draggable({helper: 'clone'});  
    $(".droparea").droppable({ 
     accept: '.items', 
     drop: function(){ 
      alert('dropped') 
     } 
    }); 
}); 
</script> 
</head> 
<body> 

<div class="listOfTeacher fl"> 
<ul> 
<li class="items" id="1">Teacher1</li> 
<li class="items" id="2">Teacher2</li> 
<li class="items" id="3">Teacher3</li> 
<li class="items" id="4">Teacher4</li> 
</ul> 
</div> 

<table border="1" width="400" id="table" style=""> 
<tbody> 
<tr id="aa"> 
<td class="droparea br">&nbsp;</td> 
<td class="droparea br">&nbsp;</td> 
<td class="droparea br">&nbsp;</td> 
<td class="droparea br">&nbsp;</td> 
<td class="droparea br">&nbsp;</td> 
</tr> 
</tbody></table> 

</body> 
</html> 
+0

ええ、私はこれをロードしました:ui.droppable.js。私にとってはうまくいかない。後もう一つ。私はテーブルを動的に作成したので、そこに問題があります。 –

+0

テーブルが作成された後に実行されるjqueryコードをチェックします。これを何度も使用してテーブルを動的に作成/削除する必要がある場合は、新しいテーブルが作成されるたびに、テーブルにドラッグ可能で削除可能なイベントを初期化する関数を記述する必要があります。このイベントをダブルコールするのを避けるために、バインド解除イベントを忘れないでください。 – ink

関連する問題