jQuery clone is not working when draggable elements create cloned copy

Question

I am new to jQuery Draggable functionality, I need to create drag and drop functionality by cloning the drag element and dropped to a specified position. Here is my code

 $(function () {
             $('#Draggable' + Localvar + '').draggable({
                 snap: true,
                 helper: 'clone',

             }
                 );
             $('#Droppable').droppable({
                 accept: $('#Draggable' + Localvar + ''),
                 drop: function (event, ui) {
                 }
             });
         });

Code creates a clone and it is draggable but it can't drop.

Answer 1

You should take a basic JS course to understand why you need to quote strings, what are selectors and how to use them.

Here is a basic setup of your code, notice the " wrapping the selectors.

 $(function () { $("#Drag").draggable({ snap: true, helper: 'clone' }); $("#Droppable").droppable({ accept: $("#Drag"), drop: function (event, ui) { alert('dropped'); } }); }); 

 .ui-widget-content { width: 60px; height: 60px; padding: 0.5em; } .ui-widget-header { width: 60px; height: 60px; margin: 1em; } 

 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="Drag" class="ui-widget-content">Drag me</div> <div id="Droppable" class="ui-widget-header">Drop here</div>