[英]How to invoke a function with a $( document ).ready() nested inside in HTML
Ok so I have this function that lets me drag and drop. 好的,所以我有此功能,可以拖放。 I got it working for one page, but I want this functionality on other pages as well.
我可以在一页上使用它,但是我也希望在其他页面上使用此功能。 So I tweaked the function to take parameters(the IDs of the elements I want to drag and the droptarget) and use as arguments so I don't have write a separate function for each page.I can't get it to work.
所以我对函数进行了调整以获取参数(我要拖动的元素的ID和droptarget)并用作参数,所以我没有为每个页面编写单独的函数,我无法使其正常工作。 I'm fairly new to javascript,jquery mobile and html.
我是javascript,jquery mobile和html的新手。 Is this even legal?
这合法吗? If so how do I go about it?
如果是这样,我该怎么办?
<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>
Don't call your function before declaring it ;) 在声明函数之前不要调用它;)
I think this is why you don't get anything... 我认为这就是为什么你什么都没得到的原因...
<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>
I actually figured it out, kind of. 我实际上想通了,有点。 Didn't know you can have multiple selectors.
不知道您可以有多个选择器。 Maybe this will help someone else.
也许这会帮助别人。 The
$(this)[0]
represent the selector that's being worked on. $(this)[0]
表示正在使用的选择器。 Still having a problem with the appending of draggable to the drop target,though. 但是,仍然存在将可拖动对象附加到放置目标的问题。
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.