如何使用图像阵列创建拖放功能？

Question

我很难弄清楚如何在我的应用中创建拖放功能，接受可拖动的项目并确定它是否是正确的答案，如果它是正确的，它将显示一条说明成功的消息！< / H2>

我的应用程序显示两个图像，两个图像都是比萨饼的一部分，然后它将显示8个可拖动的数字，您必须从中选择并将它们拖到一个可放置的框中，以检查其是否正确。所以我从...开始......

<?php 
   $something = get_something();
?>

这种情况发生了8次，因此数组的每个数字代表它拥有多少个切片

然后我调用var whichImage = Math.round（Math.random（）*（p-1））;我将随机＃存储到变量whichImage中，该变量包含披萨切片的数量，因为每个数组＃与披萨切片图像相关，我将用它来生成随机披萨 PizzaImageOne[1]="http://s23.postimg.org/6yojml8vb/Pizza_One.png" PizzaImageOne[2]="http://s13.postimg.org/5d8zxnb2b/pizzatwo.png"

我用新数组再次做到这一点

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))

我这样做了8次＃draggable1，＃draggable2，draggable3，...一直到8

然后我制作了一个数组，并将它们保存到每个数组中，每次8次，每个可拖动的函数代表1到8的数字，因为我们正在添加像馅饼一样的披萨饼

<script>
        $(function() {
            $( "#draggable1" ).draggable();
        });
  </script>

我这样做直到我在每个数组中填充8个可拖动的数字

所以逻辑是MyAnswer = WhichImage + WhichImage2然后我必须检查DraggableNumber [MyAnswer]是否被删除然后我有正确答案...

我将如何创建此功能？

Answer 1

根据您的评论，这将是一项简单的任务，您只需按照以下步骤操作：

1. 创建切片数组中包含的两个随机数
2. 计算这些值的总和
3. 如果此数字等于总和，则删除数字比较 切片

这里有一个示例代码：

<强> 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