How to drag one div to another? I want to drag one of the blocks on the right to the left and, if another one has already been inserted in the left block, then replace it.

Is it possible to implement this on jQuery?

.content { border:1px solid #CCC; width:200px; height:100px; padding:5px; margin:10px 0px;} .box { width:200px; height:50px; margin:10px 0px; border:1px solid #CCC;} 
 <div style="float:left;"> <div class="content">сюда перетаскивать контент</div> <div class="content">или сюда перетаскивать контент</div> <div class="content">или сюда перетаскивать контент</div> </div> <div style="float:right;"> <div class="box">Перетащить box1</div> <div class="box">Перетащить box1</div> <div class="box">Перетащить box1</div> <div class="box">Перетащить box1</div> </div>

1 answer 1

Yes you can. Need to use draggable and droppable.

 $(function(){ $(".box").draggable(); $(".content").droppable({ accept: '.box', drop: function(event, ui) { $(".box",this).remove(); $(this).append(ui.draggable); $(ui.draggable).removeAttr( 'style' ); } }); });

Here is an example https://jsfiddle.net/a9psqm6v/