使用jQuery UI将丢弃的项推送到数组

Push dropped item to Array using jQuery UI?

本文关键字：数组 jQuery UI 使用      更新时间：2023-09-26

我试图在使用jQuery UI的可丢弃功能将单词的ID丢弃后将其推送到列表中。当我拖放单词时，console.log()会给我正确的ID。但是我下面的.push()调用什么都不做。如何推送给定的ID？

目标：

投放前：一、二、

降落后：一、二、三、

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>
更改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);
}
相关文章：