jquery draggable on few divs

Question

Picture:

<div id="grid-wrapper">
<div id="grid"></div>
<div id="grid"></div>
<div id="grid"></div>
<div id="grid"></div>
</div>

I want to change class on two divs when I drop my span, and remove draggable.

I have this:

$( ".dragandrop" ).draggable({ snap: "#grid" });

    $("#grid").droppable({
          drop: function( event, ui ) {
            $( this )
              .addClass( "droped" )
          }
        });

This code add me .droppable only on first div, and doesn't add class "droped", I can't do removing .draggable. Can you help me?

Answer 1

First off, be careful using the same id for multiple elements. It can cause really weird issues (see this post ).

Second, make sure you add the draganddrop class to the appropriate elements that you want to, well, drag and drop.

And you want to removed the draggable on an element once you dropped it? I think what you want looks something like this:

 $( ".dragandrop" ).draggable({ snap: ".dragandrop" , stop: function(event, ui){ $( this ).addClass( "droped" ); $( this ).draggable( 'disable' ); } }); $(".dragandrop").droppable({}); 

 div{ padding: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <div id="grid-wrapper"> <div id="grid1" style="background:orange;" class="dragandrop">a</div> <div id="grid2" style="background:red;" class="dragandrop">b</div> <div id="grid3" style="background:green;" class="dragandrop">c</div> <div id="grid4" style="background:yellow;" class="dragandrop">d</div> </div> 

You may also want to add in some logic to keep the active div on top.