Question

我需要有人帮助我使用jQuery draggable和droppable。

当项目下拉并拖走时，将/推送/弹出值推送到喜欢/仇恨数组。
当项目离开喜欢/仇恨框时，他们可以回到他们来自的地方，正确的div框。

我不明白为什么当我下拉/删除框时会显示一个项目的2个名字，虽然现在我可以使用$ .unique（）但它根本不是练习。我已经尝试了很多方法但不确定如何在取出项目时从Like / Hate Array中弹出值。非常感谢你！

  Like = [];
  Hate = [];
$(function () {
    $("#AllTable .test").draggable({
        appendTo: "body",
        helper: "clone",
        revert: "invalid",
    });

    $(".LikeBox div").droppable({
        drop: function (event, ui) {
            var $item = ui.draggable;
            $item.appendTo("#likeTable");
            var ingre = $item.text();

            alert(ingre);
            Like.push(ingre);
            Like = $.unique(Like)
        }
    });

    $(".HateBox div").droppable({
        drop: function (event, ui) {
            var $item = ui.draggable;
            $item.appendTo("#hateTable");

            var ingre = $item.text();
            Hate.push(ingre);
            Hate = $.unique(Hate)
        }
    });

    $(function () {
        $('.IngreMainCat').accordion();
    });
});

修改我的新代码就是这个，问题1解决了：

Like = [];
Hate = [];

$(function() {
  $( "#AllTable .test" ).draggable({
    appendTo: "body",
    helper: "clone",
    revert: "invalid",
  });

  $( ".LikeBox .droptrue" ).droppable({
    drop: function( event, ui ) {
      var $item = ui.draggable;
      $item.appendTo("#likeTable");
      var ingre = $item.text();
      Like.push(ingre);
      if($.inArray(ingre,Hate) > -1){
        var index = Hate.indexOf(ingre);
        if (index > -1) {
          Hate.splice(index, 1);
        }
      }
    } 
  }); 

  $( ".HateBox .droptrue" ).droppable({
    drop: function( event, ui ) {
      var $item = ui.draggable;
      $item.appendTo("#hateTable");
      var ingre = $item.text();
      Hate.push(ingre);
      if($.inArray(ingre,Like) > -1){
        var index = Like.indexOf(ingre);
        if (index > -1) {
          Like.splice(index, 1);
        }
      }
    } 
  });

});

Answer 1

由于您的选择器，您实际上有2个可以放置的div。因为你调用.LikeBox的所有子div，你得到这两个droppables，每个droppables运行drop函数：

  <div>
  <div id="likeTable" class="droptrue">

在调用droppable之后，它看起来像这样，请参阅两者的ui-droppable：

<div class="ui-droppable">
      <div id="likeTable" class="droptrue ui-droppable">

澄清你的选择器，你应该没有问题。像这样举例如：

$( ".LikeBox .droptrue" ).droppable({

看工作小提琴：https://jsfiddle.net/2ets9hjg/

编辑：

对于要从数组中删除的元素，建议：不要使用push和pop并跟踪表格中添加和删除的内容，您可以map你你需要它们的桌子。请参阅jquery map：http://api.jquery.com/jquery.map/。跟踪这种方式更容易。像这样：

Like = $.map($( "#likeTable div" ),function(a){return a.textContent});

https://jsfiddle.net/2ets9hjg/4/

将值传递给具有draggable和droppable的数组

1 个答案: