How to use jquery droppable to drop element at specific position?

Question

I try to make an editor with a sidebar. to drag components from the sidebar to the editor area.

But, I had some problems. the most critical one is.

to sort dropped component at a specific position into the editor area for example or in other words I need to drag and drop component 1 and component 2 and then component 3 between 1 and 2.

I used for that jquery sortable function.

Error :

I get no sort for the dropped component, moreover, if I try to sort the dropped components later, I get components cloned inside the editor area rather than get it sorted

here is my attempt

 $( function() { $("#side").resizable().draggable(); $("#editor").sortable().disableSelection().droppable({ accept: ".component", drop: function(event, ui) { $(this).append(ui.draggable.clone()); } }); $(".component").mousedown (function(){ $(this).css('cursor','grabbing'); }).draggable ({ helper: "clone" }); });

 #editor, #side, .component{padding: 10px;} #editor { position: fixed; top:0; left:0; right:0; bottom:0; background:#9999; z-index: -1; text-align: right; cursor: default; } #side{ position: fixed; top:0; left:0; width:300px; height: 100vh; background:red; color:yellow; cursor: move; }.component{ background-color:blue; width: 80px; height: 50px; margin:20px; display: inline-block; }.component:hover{ cursor:grab; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="side"> <h3 id="title">I'm resizable and draggable</h3> <div class="component"> I'm droppable 1 </div> <div class="component"> I'm droppable 2 </div> <div class="component"> I'm droppable 3 </div> <div class="component"> I'm droppable 4 </div> </div> <div id="editor" contenteditable="true"> <h3 id="title">I'm editable</h3> </div>

Answer 1

Consider using connectToSortable with your Draggable. See the following example.

 $(function() { $("#side").resizable().draggable(); $("#editor").sortable({ items: "div.component" }).disableSelection(); $(".component").mousedown(function() { $(this).css('cursor', 'grabbing'); }).draggable({ helper: "clone", connectToSortable: "#editor" }); });

 #editor, #side, .component { padding: 10px; } #editor { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #9999; z-index: -1; text-align: right; cursor: default; } #side { position: fixed; top: 0; left: 0; width: 300px; height: 100vh; background: red; color: yellow; cursor: move; }.component { background-color: blue; width: 80px; height: 50px; margin: 20px; display: inline-block; }.component:hover { cursor: grab; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="side"> <h3 id="title">I'm resizable and draggable</h3> <div class="component"> I'm droppable 1 </div> <div class="component"> I'm droppable 2 </div> <div class="component"> I'm droppable 3 </div> <div class="component"> I'm droppable 4 </div> </div> <div id="editor" contenteditable="true"> <h3 id="title">I'm editable</h3> </div>

The cloned items are then dropped directly into the Sortable.