好的,我有这个功能可以让我拖放。我让它在一个页面上工作,但我也希望在其他页面上也有这个功能。因此,我调整了该函数以获取参数(我想要拖动的元素的 ID 和放置目标)并用作参数,这样我就不必为每个页面编写单独的函数。我无法让它工作。我对 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>
最佳答案
在声明函数之前不要调用它;)
我认为这就是为什么你什么也得不到的原因......
<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>
关于javascript - 如何使用嵌套在 HTML 中的 $( document ).ready() 调用函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34123924/