JQuery UI Drag Drop Demo

Demo By: Revolution / Controlled Chaos

Drag Me

Drop Here

All Code (BELOW) is also in the CUSTOM CODE section of this FORM.
Add this code to the CUSTOM CODE HEADER section
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
Add this code to the CUSTOM CODE FOOTER section
<script>
$( function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable( {
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
} );
</script>
Add this code to the CUSTOM CODE FOOTER section
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Form Elements to Add
Add a SECTION
Add a CONTAINER inside the SECTION
Add a DIV (DIV #1) inside the CONTAINER - class: ui-widget-content, width: 100px, height: 100px, background-color: #c0c0c0, float: left, ID: draggable
Add a DIV (DIV #2) inside the CONTAINER - class: ui-widget-header, width: 150px, height: 150px, background-color: #fff200, float: left, ID: droppable
Add a PARAGRAPH inside DIV 1. Text: Drag Me
Add a PARAGRAPH inside DIV 2. Text: Drop Here