onclick_to_trigger_drop

drag drop onclick

by Arun Valaven

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/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.0/jquery-ui.js"></script>
<body>
 
<div id="draggable" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>
 
<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>
 
</body>

CSS

#draggable 
 { 
   width: 100px; 
   height: 100px; 
   padding: 0.5em; 
   float: left; 
   margin: 10px 10px 10px 0; 
 }
 
 #droppable 
 { 
   width: 150px; 
   height: 150px;
   padding: 0.5em; 
   float: left; 
   margin: 10px; 
 }

JavaScript

$(document).ready(function() 
    {
        var cloned_element;
        
        $("#draggable").draggable({
            helper: 'clone',
            revert: true
        });
        
        $("#droppable").droppable(
        { 
            drop: function(event, ui) 
            {
                cloned_element = $(ui.helper).clone();
                ui.helper.remove();
                cloned_element.appendTo(this);
                
                $(this).addClass("ui-state-highlight").find("p").html("Dropped!");
            }
        });
        
        $('#draggable').on('click',function()
        {
            $(this).trigger("drop", $('#droppable'));
        });    
    });