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

Question

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

的数组

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

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

 <div class="col-xs-2">
   <a href="#">
      <img id="drag-cat" class="drag-img" src="images/cat.png" alt="" />
   </a>  
 </div>

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

有什么建议吗？

感谢。

编辑： JS Fiddle

Answer 1

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

$(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('<p>' + animals[i] + '</p>');
      }
      $('#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('<p>' + animals[i] + '</p>');
}
$('#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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="drag-main">
  <div class="row">
    <div class="col-xs-2">
      <a href="#">
        <img id="drag-cat" class="drag-img" src="http://i.amz.mshcdn.com/KRUEW_Zm_0UvTD97QnKID9MUqmk=/150x150/2012%2F12%2F04%2Fd0%2Fcat.c4A" alt="" />
      </a>
    </div>
    <div class="col-xs-2">
      <a href="#">
        <img id="drag-dog" class="drag-img" src=" http://www.dogisto.com/wp-content/uploads/2016/03/dog-abandoned-150x150.jpg" alt="" />
      </a>
    </div>
  </div>
</div>
<div class="animals-box"></div>
<hr>
<div id="list">
</div>

Fiddle Demo

使用data-*属性

$(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].dataset.name;
      animals.splice(animals.indexOf(elem), 1);
      var output = [];
      for (var i = 0; i < animals.length; i++) {
        output.push('<p>' + animals[i] + '</p>');
      }
      $('#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('<p>' + animals[i] + '</p>');
}
$('#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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="drag-main">
  <div class="row">
    <div class="col-xs-2">
      <a href="#">
        <img id="drag-cat" data-name="cat" class="drag-img" src="http://i.amz.mshcdn.com/KRUEW_Zm_0UvTD97QnKID9MUqmk=/150x150/2012%2F12%2F04%2Fd0%2Fcat.c4A" alt="" />
      </a>
    </div>
    <div class="col-xs-2">
      <a href="#">
        <img id="drag-dog" data-name="dog" class="drag-img" src=" http://www.dogisto.com/wp-content/uploads/2016/03/dog-abandoned-150x150.jpg" alt="" />
      </a>
    </div>
  </div>
</div>
<div class="animals-box"></div>
<hr>
<div id="list">
</div>

Answer 2

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

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

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