使用jQuery UI將放置的項目推入數組？

Question

一旦嘗試使用jQuery UI的droppable功能將單詞的ID刪除，我就會將其推入列表。 當我拖放單詞時， console.log()給我正確的ID。 但是，我下面的.push()調用沒有任何作用。 如何推送給定的ID？

目標：

掉落前：一，二，

掉落之后：1、2、3，

JavaScript：

var words = ["One,Two,"];
document.getElementById("demo").innerHTML = words.toString();

$(move);

function move() {
  $('#moving').draggable();
  $('#drop').droppable({
    drop: handleDropEvent
  });
}

function handleDropEvent(event, ui) {
  var draggable = ui.draggable;
  var droppable = ui.droppable;
  var word = ui.draggable.attr('id') 
  words.push(word)
  console.log(word)
  $('#moving').hide(draggable.attr);
}

HTML：

<p id="demo"></p>

<div>
   <span id="Three">
      <strong> Three </strong>
   </span>
</div>

Answer 1

更改words變量時， #demo元素不會自動更新。 您必須手動更新它：

var words = ["One,Two,"];
document.getElementById("demo").innerHTML = words.toString();

$(move);

function move() {
  $('#moving').draggable();
  $('#drop').droppable({
    drop: handleDropEvent
  });
}

function handleDropEvent(event, ui) {
  var draggable = ui.draggable;
  var droppable = ui.droppable;
  var word = ui.draggable.attr('id') 
  words.push(word)
  document.getElementById("demo").innerHTML = words.toString();
  console.log(word)
  $('#moving').hide(draggable.attr);
}