好的,所以我有此功能,可以拖放。我可以在一页上使用它,但是我也希望在其他页面上使用此功能。所以我对函数进行了调整以获取参数(我要拖动的元素的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>
实际上,我已经弄明白了。不知道您可以有多个选择器。也许这会帮助别人。该$(this)[0]
代表就是BEING对工作的选择。但是,仍然存在将可拖动对象附加到放置目标的问题。
<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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句