jquery在拖动区域中添加项目后将其从数组中删除 [英] jquery removing items from array after they are added in drag area

问题描述

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

I'm using jquery ui for dragging items, so I have an array similar to:

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，并且应该显示在页面上。

So I get this on the page, what I want to do is if I drag "cat" to dragging zone, I would like to remove it from the array automatically. New array should have only "dog" and "monkey" in it and that should be showed on the page.

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

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

That is my html part, so when I drag it and this item is showed in that drag div, I would like to update array.

有什么建议吗？

谢谢。

编辑：
JS小提琴

推荐答案

• 使用 Array＃splice 删除 item 从数组中指定索引


• 使用字符串#split 从 id 获取名称属性，因为没有其他参考


• 重新绑定输出数组，考虑删除 item


• Use Array#splice to remove item from array by specifying the index
• Use String#split to get name from id attribute as there is no other reference
• Re-bind the output array considering removed 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>

使用数据 - * 属性

Using data-* attribute

$(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>

这篇关于jquery在拖动区域中添加项目后将其从数组中删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！