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.