Droppable divがオンザフライで作成されていません

私は要素（UL、LIまたはDIV）のドラッグ可能なプロパティとドロップ可能なプロパティを設定するためにクラスを使用しています。だから私は設計時に要素を作成するときに意図したようにドラッグアンドドロップすることができます。しかし、私が素早く（id = 'ontheflyDiv'を持つdiv）の要素を作成すると、落書きとしては機能しません。Droppable divがオンザフライで作成されていません

ありがとうございます。

<html xmlns=""> 
<head> 
    <title></title> 
    <link rel="stylesheet" href="/Styles/themes/base/jquery.ui.all.css"> 
    <script src="/Scripts/jquery-1.6.2.js"></script> 
    <script src="/Scripts/ui/jquery.ui.core.js"></script> 
    <script src="/Scripts/ui/jquery.ui.widget.js"></script> 
    <script src="/Scripts/ui/jquery.ui.accordion.js"></script> 
    <script src="/Scripts/ui/jquery.ui.mouse.js" type="text/javascript"></script> 
    <script src="/Scripts/ui/jquery.ui.draggable.js" type="text/javascript"></script> 
    <script src="/Scripts/ui/jquery.ui.droppable.js" type="text/javascript"></script> 
    <link rel="stylesheet" href="/Styles/demos.css"> 
    <script> 

     $(function() { 

     //Draggable Items 
      $(".myDragClass").draggable({ 
       helper: 'clone', 
       appendTo: 'body' 
      }); 
     //Droppable 
      $(".myDropClass").droppable(
       { 
        drop: function (event, ui) { 
         //remove old item 
         $(this).find(".myDragClassPlaceHolder").remove(); 

         var listHtml = "<li class='myDragClass' style='width: 200px;color:#000000;background-color:#00FF00;'>" + 
             "<div id='ontheflyDiv' class='myDropClass' style='width:200px;height:100px;'>" +           
             "New Droppable area" + ui.draggable.text() + "</div></li>"; 

         $(this).append(listHtml); 
        } 
       }); 

     }); 
    </script> 
</head> 
<body> 
    <div id="div3" class="demos-nav"> 
     <ul class="myDropClass"> 
      <li id="li7" class="myDragClassPlaceHolder">Drag and drop order here</li> 
     </ul> 
    </div> 
    <BR /> 
    <div id="Div1" style="float: none; clear: both; font-size: 12px; height: 100px; overflow: scroll;"> 
     <table> 
      <tr> 
       <td><B><U>Order No</B></U></td> 
      </tr> 
      <tr> 
       <td> 
        <div class="myDragClass">5000162255</div> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <div class="myDragClass"> 
         5000162266</div> 
       </td> 
      </tr> 
     </table> 
    </div> 
</body> 
</html>

出典

2011-08-16 balaG

は、私はあなたがyour'veがDOMに追加した後、その上）（ドロップ可能呼び出すことで、新しく追加要素がドロップ可能にする必要があると思います。次のようなものを追加すると、ドロップ機能の下部に

$(this).find('#ontheflyDiv').droppable({ ... });

が追加されます。 jqueryのlive（）関数がクリックやその他のイベントに対して行うことができるのと同様に、ページロード後に追加された要素に削除可能な機能を追加する方法については気づいていません。

出典

2011-08-16 12:23:42 Jer

正しいですが、live（）はイベントでは動作しますが、droppable（）動作では動作しません。 – balaG

ありがとうございます – balaG

Droppable divがオンザフライで作成されていません

答えて

関連する問題