Droppable div在飛行中創建不工作

我正在使用class來設置元素（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在飛行中創建不工作

回答

相關問題