A custom implementation of the Gridstack.js demo

This is a very simple customisation of a basic [login to view URL] ([login to view URL]) demo. We want you to customise the official two grid demo here: [login to view URL] You should change it to enable the following: 1. Remove the blue and red grid areas. These are not needed. 2. Add 2 different draggable items; item 1 (blue) and item 2 (red) 3. When the "Drag Me" item is dropped in the yellow area, it should duplicate the item and not remove it from the green area (tip: use the clone helper for 'draggable'). 4. When the item is moved from the green area create an option to show: - a different element whilst it is dragged - a different element when it is placed Both these options should be defined as a template in the code. E.g. display: "<div class="1">content1</div>; drag: "<div class="2">content2</div>"; drop: "<div class="3">content3</div>" 5. Change the item resize handle from the a single point on the bottom right to one on the right for y-axis changes and one on the bottom for x-axis changes 6. Create and option to fix the size of dragged items in either the x-axis or y-axis (so none, one, or both axis are resizable). 7. Create a button in each item to delete that item after it has been dragged to the stage 8. Create an option to click a space on the grid and have a popup to select either a red or blue item to be inserted at that location. Do not change the [login to view URL] source dist. Only use additional custom JS.