CODEWITHSUNDEEP
jqueryjquery-uidroppable
Dominik-A
Dominik-A

Reputation: 1

After cloned a div is not droppable anymore

on this website I am trying to clone and drag and drop objects from left to right.

To drag and drop I have no problem, but it happens that as soon I clone a div this is not droppable anymore.

When dropped, the cloned divs are aligned automatically on my droppable "zone".

This not happens if they are not cloned.

$(function() {
  $("#dragrabble-one").draggable({
    helper: 'clone'
  });
  $("#dragrabble-two").draggable({
    helper: 'clone'
  });
  $("#dragrabble-three").draggable({
    helper: 'clone'
  });
  $("#dragrabble-four").draggable({
    helper: 'clone'
  });
  $("#dragrabble-five").draggable({
    helper: 'clone'
  });
  $("#dragrabble-six").draggable({
    helper: 'clone'
  });
  $("#dragrabble-seven").draggable({
    helper: 'clone'
  });
  $("#dragrabble-eight").draggable({
    helper: 'clone'
  });
  $("#dragrabble-one").draggable({
    revert: "invalid"
  });
  $("#dragrabble-two").draggable({
    revert: "invalid"
  });
  $("#dragrabble-three").draggable({
    revert: "invalid"
  });
  $("#dragrabble-four").draggable({
    revert: "invalid"
  });
  $("#dragrabble-five").draggable({
    revert: "invalid"
  });
  $("#dragrabble-six").draggable({
    revert: "invalid"
  });
  $("#dragrabble-seven").draggable({
    revert: "invalid"
  });
  $("#dragrabble-eight").draggable({
    revert: "invalid"
  });
  $("#droppable-box").droppable({
    drop: function (event, ui) {
	ui.helper.clone().appendTo('#droppable-box');
}
  });
});
.box
{
  height: 30px;
  width: 50px;
  border: 1px solid black;
  background: green;
}

#droppable-box
{
  height: 400px;
  width: 200px;
  border: 1px solid black;
  background: lightgray;
}

.container
{
  border: 1px solid black;
  float: left;
  margin: 0 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>

<span>Drag green boxes onto gray dropzone</span>

<div class="container">
  <div class="box" id="dragrabble-one"></div><br />
  <div class="box" id="dragrabble-two"></div><br />
  <div class="box" id="dragrabble-three"></div><br />
  <div class="box" id="dragrabble-four"></div><br />
  <div class="box" id="dragrabble-five"></div><br />
  <div class="box" id="dragrabble-six"></div><br />
  <div class="box" id="dragrabble-seven"></div><br />
  <div class="box" id="dragrabble-eight"></div><br />
</div>

<div class="container">
  <div id="droppable-box">Drop Zone</div>
</div>

EDIT: what I tried is also this

$("#droppable-box").droppable({
  drop: function (event, ui) {
    var clone = ui.helper.clone();
    clone.draggable();
    clone.appendTo('#droppable-box');
  }
});

Without any results (on my website).

Upvotes: 0

Views: 117

Answers (1)

Dedering
Dedering

Reputation: 423

That's because the clone needs to be instantiated with draggable.

Try this: 

$("#droppable-box").droppable({
  drop: function (event, ui) {
    var clone = ui.helper.clone();
    clone.draggable();
    clone.appendTo('#droppable-box');
  }
});

Upvotes: 1

Related Questions