javascript - why is droppable not accepting the item being dragged? -

why jquery droppable not accepting item being dropped? don't want use sortable anywhere.

$(function() {  	$(".item").draggable({  		helper: "clone",  		revert: "invalid"  	});  	$("#drop").droppable({  		accept:".item"      });    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>  <div class="items">    <div class="item">1</div>    <div class="item">2</div>    <div class="item">3</div>    <div class="item">4</div>    <div class="item">5</div>    <div class="item">6</div>  </div>  <div id="drop">	</div>

it work:

$(function() {  	$(".item,.letter ").draggable({  		helper: "clone"  	});  	$("#drop").droppable({  		accept:".item",          drop: function( event, ui ) {            alert("dropped")          }      });    });

#drop {    border:1px dashed gray;    width:100px;    height:100px;  }    .items * {    background:rgba(0,0,0,.1);    padding:3px 0;    width:20px;    text-align:center  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>  <div class="items">    <div class="item">1</div>    <div class="item">2</div>    <div class="item">3</div>    <div class="item">4</div>    <div class="item">5</div>    <div class="item">6</div>  </div>    <br><br>    <div class="items">    <div class="letter">a</div>    <div class="letter">b</div>    <div class="letter">c</div>    <div class="letter">d</div>    <div class="letter">e</div>    <div class="letter">f</div>  </div>  <div id="drop">	</div>

it accepting it, items not staying there. if want clone stay there need append container this:

$(function() {      $(".item,.letter ").draggable({          helper: 'clone'      });  	$("#drop").droppable({  		accept:".item",          drop: function(event, ui) {              $(this).append($(ui.draggable).clone());              $("#drop .item").addclass("dropped");              $(".dropped").removeclass("ui-draggable item");              $(".dropped").draggable({                  containment: 'parent',                  grid: [80,76]              });          }      });    });

#drop {    border:1px dashed gray;    width:100px;    height:100px;  }    .items *, .dropped {    background:rgba(0,0,0,.1);    padding:3px 0;    width:20px;    text-align:center  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>  <div class="items">    <div class="item">1</div>    <div class="item">2</div>    <div class="item">3</div>    <div class="item">4</div>    <div class="item">5</div>    <div class="item">6</div>  </div>  <div id="drop">	</div>

of course can achieve lot of behaviors, example other one:

$(function() {      $(".item,.letter ").draggable({          helper: 'clone'      });  	$("#drop").droppable({  		accept:".item",          drop: function(event, ui) {              $(this).append($(ui.draggable).clone());              $("#drop .item").addclass("dropped");              $(".dropped").removeclass("ui-draggable item");              $(".dropped").draggable();          }      });    });

#drop {    border:1px dashed gray;    width:100px;    height:100px;  }    .items *, .dropped {    background:rgba(0,0,0,.1);    padding:3px 0;    width:20px;    text-align:center  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>  <div class="items">    <div class="item">1</div>    <div class="item">2</div>    <div class="item">3</div>    <div class="item">4</div>    <div class="item">5</div>    <div class="item">6</div>  </div>  <div id="drop">	</div>