jQuery UI Droppable

Welcome to SK_NetKing

Drag Me

Non droppable

Drop On Me





 Try your Self Source code just copy and past  - 

and save with .html and open it in browser  

<html>
<head>
<title>jQuery UI Droppable</title> 
<link href="//code.jquery.com/ui/1.12.1/ 
themes/base/jquery-ui.css" rel="stylesheet"></link> 
<link href="/resources/demos/style.css" rel="stylesheet"></link> 
<style type="text/css"> 
#drag 
{ 
width: 100px; 
height: 100px; 
float: left; 
margin: 10px; 
background-color :aqua; 
padding:10px; 
} 
#non-drop 
{ 
width: 100px; 
height: 100px; 
float: left; 
margin: 10px; 
background-color :orange; 
padding:10px; 
} 
#drop 
{ 
width: 100%; 
height: 150px; 
float: left; 
margin: 10px; 
background-color:yellow; 
padding:10px; 
} 

</style> 
<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> 
<script> 
$( function() { 
$( "#drag" ).draggable({
    helper:'clone'
    }); 

$( "#drop" ).droppable( 
{ 
accept:"#drag,#non-drop", 
drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" );
          var droped= $(ui.draggable).clone().appendTo("#drop");
             // $(droped).draggable();
      },
      
} ); 
} ); 

</script> 
</head>
<body>
<center> 
<h1 align="center">Welcome to SK_NetKing</h1> 
<div id="drag"> 
<p>Drag Me</p> 
</div> 
<div id="non-drop"> 
<p>Non droppable</p> 
</div> 
<div id="drop"> 
<p>Drop On Me</p> 
</div> 
</center>
 
</body>
</html>