javascript - 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 部分，所以当我拖动它并且该项目显示在该拖动 div 中时，我想更新数组。

有什么建议吗？

谢谢。

编辑: JS Fiddle

Answer 1

• 使用Array#splice通过指定索引从数组中删除item
• 使用 String#split 从 id 属性获取 name，因为没有其他引用
• 考虑已删除的item，重新绑定(bind)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('<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>