jquery在拖动区域中添加项目后将其从数组中删除

我正在使用jquery ui来拖动项目，所以我有一个类似于的数组：

var animals = ['cat', 'dog', 'monkey']; var output = []; for (var i = 0; i < animals.length; i++) { output.push('
' + animals[i] + '
'); } $('#list').html(output.join("")); 

所以我在页面上看到这个，我想要做的是如果我将“cat”拖动到拖动区域，我想自动将它从数组中删除。 新数组应该只有“dog”和“monkey”，并且应该显示在页面上。

那是我的html部分，所以当我拖动它并且这个项目显示在该drag div中时，我想更新数组。

有什么建议？

谢谢。

编辑： JS小提琴

Answer 1

• 使用Array#splice通过指定index从数组中删除item
• 使用String#split从id属性获取name ，因为没有其他引用
• 考虑删除item重新绑定output数组

 $(function() { $(".drag-main img").draggable({ revert: "invalid", refreshPositions: true, drag: function(event, ui) { ui.helper.addClass("draggable"); }, stop: function(event, ui) { ui.helper.removeClass("draggable"); var image = this.src.split("/")[this.src.split("/").length - 1]; } }); $(".animals-box").droppable({ drop: function(event, ui) { if ($(".animals-box img").length == 0) { $(".animals-box").html(""); } ui.draggable.addClass("dropped"); var elem = ui.draggable[0].getAttribute('id').split('-')[1]; animals.splice(animals.indexOf(elem), 1); var output = []; for (var i = 0; i < animals.length; i++) { output.push('
' + animals[i] + '
'); } $('#list').html(output.join("")); $(".animals-box").append(ui.draggable); } }); }); var animals = ['cat', 'dog', 'monkey']; var output = []; for (var i = 0; i < animals.length; i++) { output.push('
' + animals[i] + '
'); } $('#list').html(output.join("")); 

 .drag-main img { width: 75px; } .animals-box { background-color: gray; height: 100px; width: 100%; } .animals-box img { float: left; } .draggable { filter: alpha(opacity=80); opacity: 0.8; } .dropped { position: static; } 

Answer 2

您可以获取已删除的elemenent id并在drop事件中将其从数组中删除，如：

 var index = animals.indexOf( ui.draggable.attr("id").replace('drag-','')); animals.splice(index, 1); 

演示： https ： //jsfiddle.net/th01sw16/2/