CODEWITHSUNDEEP
javascriptjqueryarrays
Morpheus
Morpheus

Reputation: 997

jquery removing items from array after they are added in drag area

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(""));

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>

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.

Any suggestions?

Thanks.

EDIT: JS Fiddle

Upvotes: 0

Views: 271

Answers (2)

Rayon
Rayon

Reputation: 36609

  • 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>

Fiddle Demo

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>

Upvotes: 1

Irvin Dominin
Irvin Dominin

Reputation: 30993

You can get the dropped elemenent id and remove it from the array in the drop event like:

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

Demo: https://jsfiddle.net/th01sw16/2/

Upvotes: 0

Related Questions