如何使用嵌套在HTML中的$（document）.ready（）調用函數

Question

好的，所以我有此功能，可以拖放。 我可以在一頁上使用它，但是我也希望在其他頁面上使用此功能。 所以我對函數進行了調整以獲取參數（我要拖動的元素的ID和droptarget）並用作參數，所以我沒有為每個頁面編寫單獨的函數，我無法使其正常工作。 我是javascript，jquery mobile和html的新手。 這合法嗎？ 如果是這樣，我該怎么辦？

 <div data-role="page" id="proteinDrag" data-add-back-btn="true" data-dialog="true">
        <div data-role="header" style="background:#0493e5">
            <h1 style="color:white;">Protein</h1>
        </div>
        <p>Drag the food that is a good source of protein to the plate</p>
        <div id="droppable" class="ui-widget-header"><img src="....png"></div>
        <br style="clear:both">
        <div id="yesDrag" class="draggable ui-widget-content" style="text-align:middle;"><img src="....png"></div>
        <div id="noDrag" class="draggable ui-widget-content" style="text-align:left;"><img src="....png"></div>
        <script>
            dragging("#yesDrag","#noDrag","#droppable");
        </script>
  </div>
    //tried placing the script at end of the body and head     
  <script type ="text/javascript">
     var paraC;
     var paraW;
     var correct;
     var wrong;

     function dragging(idDrag, idNoDrag, idDrop){
         paraC = document.createElement("p");
         paraW = document.createElement("p");
         correct = document.createTextNode("Good Choice!");
         wrong = document.createTextNode("Not Quite!");
         $(function() {
           $( idDrag ).draggable({
                                    drag: function(event, ui){
                                      paraC.appendChild(correct);
                                      idDrag.appendChild(paraC);
                                      idDrop.appendChild(idDrag);
                                    }
                                 });
           $( idNoDrag ).draggable({
                                    helper:"clone",
                                    revert: true,
                                    drag: function(event, ui){
                                      paraW.appendChild(wrong);
                                      idNoDrag.appendChild(paraW);
                                    }
                                   });

           });
     }
 </script>

Answer 1

在聲明函數之前不要調用它；）

我認為這就是為什么你什么都沒得到的原因...

<div data-role="page" id="proteinDrag" data-add-back-btn="true" data-dialog="true">
  <div data-role="header" style="background:#0493e5">
    <h1 style="color:white;">Protein</h1>
  </div>
  <p>Drag the food that is a good source of protein to the plate</p>
  <div id="droppable" class="ui-widget-header"><img src="....png"></div>
  <br style="clear:both">
  <div id="yesDrag" class="draggable ui-widget-content" style="text-align:middle;"><img src="....png"></div>
  <div id="noDrag" class="draggable ui-widget-content" style="text-align:left;"><img src="....png"></div>
</div>
//tried placing the script at end of the body and head     
<script type ="text/javascript">
var paraC;
var paraW;
var correct;
var wrong;

function dragging(idDrag, idNoDrag, idDrop){
 paraC = document.createElement("p");
 paraW = document.createElement("p");
 correct = document.createTextNode("Good Choice!");
 wrong = document.createTextNode("Not Quite!");
 $(function() {
   $( idDrag ).draggable({
    drag: function(event, ui){
      paraC.appendChild(correct);
      idDrag.appendChild(paraC);
      idDrop.appendChild(idDrag);
    }
  });
   $( idNoDrag ).draggable({
    helper:"clone",
    revert: true,
    drag: function(event, ui){
      paraW.appendChild(wrong);
      idNoDrag.appendChild(paraW);
    }
  });

 });
}
// lunch function
  dragging("#yesDrag","#noDrag","#droppable");
</script>

Answer 2

我實際上想通了，有點。 不知道您可以有多個選擇器。 也許這會幫助別人。 $(this)[0]表示正在使用的選擇器。 但是，仍然存在將可拖動對象附加到放置目標的問題。

     <script type ="text/javascript">
     var paraC = document.createElement("p");
     var paraW = document.createElement("p");
     var correct = document.createTextNode("Good Choice!");
     var wrong = document.createTextNode("Not Quite!");
     var dropElement;

    $(function() {
      $( "#yesDrag, #yesDrag1" ).draggable({
                                  drag: function(event, ui){
                                    paraC.appendChild(correct);
                                    $(this)[0].appendChild(paraC);
                                    dropElement.appendChild($(this)[0]);
                                  }
        });
        $( "#noDrag, #noDrag1" ).draggable({
                                 helper:"clone",
                                 revert: true,
                                 drag: function(event, ui){
                                    paraW.appendChild(wrong);
                                    $(this)[0].appendChild(paraW);
                                 }
        });
        $( "#droppable, #droppable1" ).droppable({
                                  drop:function( event, ui ) {
                                       dropElement = $(this)[0];
                                  }
        });

      });
      </script>