我很难弄清楚如何在我的应用程序中创建一个拖放功能，该功能将接受可拖动的项目并确定是否正确的答案，如果正确，它将显示一条消息，说明成功！
我的应用程序显示两个图像，两个图像都是比萨饼的一部分，然后它将显示8个可拖动数字，您必须选择这些数字并将它们拖动到一个可放下的框内，以检查其是否正确。所以我从...开始
PizzaImageOne[1]="http://s23.postimg.org/6yojml8vb/Pizza_One.png"
PizzaImageOne[2]="http://s13.postimg.org/5d8zxnb2b/pizzatwo.png"
这种情况发生了8次，所以数组的每个数字代表它持有多少个切片
然后我叫var whichImage = Math.round（Math.random（）*（p-1））;我将一个随机＃存储到保存了比萨饼片数量的变量whichImage中，因为每个数组＃都与比萨饼片图像相关，我将通过这样做来生成随机比萨饼
document.write('<img src="'+theImages[whichImage]+'">');我用一个新的数组重新做一遍
PizzaImageTwo[1]="http://s23.postimg.org/6yojml8vb/Pizza_One.png"
PizzaImageTwo[2]="http://s13.postimg.org/5d8zxnb2b/pizzatwo.png"
完全相同，但具有新变量，因此随机调用可以与第一个不同
var whichImage2 = Math.round(Math.random()*(p-1))
然后我有
<script>
$(function() {
$( "#draggable1" ).draggable();
});
</script>
我做了8次，所以＃draggable1，＃draggable2，draggable3 ... ...一直到8
然后我制作了一个数组，并将其保存到每个数组中，就像这样8次，每个可拖动函数表示1到8的数字，因为我们添加了像分数之类的比萨饼
<script>
var theimagestwo = new Array();
Draggablenumber[1] = $("#draggable1");
DraggableNumber[2] = $("#draggable2");
我这样做直到在每个数组中填满8个可拖动的数字
所以逻辑是MyAnswer = whichimage + whichimage2然后我必须检查是否拖动DraggableNumber [MyAnswer]然后我有正确的答案...
我将如何创建此功能？
最佳答案
发表评论后，这将是一项轻松的任务，您只需执行以下步骤：
创建slices数组中包含的两个随机数
计算这些值的总和
当您删除数字时，比较此数字是否等于总和
切片
这里有一个示例代码：
的HTML
<div id="slices">
</div>
<div id="options">
<div data-index="1">1</div>
<div data-index="2">2</div>
<div data-index="3">3</div>
<div data-index="4">4</div>
<div data-index="5">5</div>
<div data-index="6">6</div>
<div data-index="7">7</div>
<div data-index="8">8</div>
</div>
<div id="area">
drop area
</div>
jQuery UI
//---Vars
var slices = $("#slices");
var options = $("#options");
var area = $("#area");
var selected;
var result;
//---Array of images
var pizzas = [
{image: "http://s23.postimg.org/6yojml8vb/Pizza_One.png", value: 1},
{image: "http://s13.postimg.org/5d8zxnb2b/pizzatwo.png", value: 2},
{image: "http://s12.postimg.org/xfsxldqyx/pizzathree.png", value: 3},
{image: "http://s14.postimg.org/d6tdq0865/pizzafour.png", value: 4}
];
var total = pizzas.length;
//---Make boxes dragables
options.find("div").draggable();
//---When the boxes are dropped
area.droppable({
drop: function(event, ui){
if( Number( ui.draggable.attr("data-index") ) == result ){
alert("correct");
}else{
alert("incorrect");
}
}
});
//---Insert random pizza slices
function insertPizzas(){
selected = [];
result = 0;
//---Generate aleatory pieces
var rand
while(selected.length < 2){
//---Random value
rand = Math.floor( Math.random() * total );
//---Sum result
result += pizzas[rand].value;
selected.push( rand );
}
//---Clear the slices
slices.html("");
//---Add the new slices
selected.forEach(function(number){
var img = $("<img/>");
img.attr("src", pizzas[number].image);
slices.append(img);
});
}
insertPizzas();
jsfiddle
关于javascript - 如何使用图像阵列创建拖放功能？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34257809/