Drag and Drop Text to Field POC in Vue.js
Budget: $250 – $750 USD
Simple Vue SPA with 3 input fields and one push button.
When push button is pressed a rectangular div with a title must appear overlaid (higher Z) with 3 labels and an X button to make it disappear (close it). Think of this floating div as a non-modal dialog.
The labels must come from JS data.
The floating div must be draggable by clicking the title and moves the div around the page.
Each of the 3 labels on the div must be draggable to the base page and into each field.
Once the text is dropped on the input field, the new value of the field must be replaced with the text of the label.
At any time, you can drag another label to the same field and it should replace its value.
The dragging and dropping must be done arbitrarily and the floating div never close.
The bottom layer must be accessible at all times.
Preferably the floating div to be a custom component, but if a std library is found that you can leverage that's OK.
No need for special formatting, design etc.
The main objective of this POC is to prove that text from a floating div (non-modal dialog) can be dragged and dropped onto input fields, replacing their value.
When push button is pressed a rectangular div with a title must appear overlaid (higher Z) with 3 labels and an X button to make it disappear (close it). Think of this floating div as a non-modal dialog.
The labels must come from JS data.
The floating div must be draggable by clicking the title and moves the div around the page.
Each of the 3 labels on the div must be draggable to the base page and into each field.
Once the text is dropped on the input field, the new value of the field must be replaced with the text of the label.
At any time, you can drag another label to the same field and it should replace its value.
The dragging and dropping must be done arbitrarily and the floating div never close.
The bottom layer must be accessible at all times.
Preferably the floating div to be a custom component, but if a std library is found that you can leverage that's OK.
No need for special formatting, design etc.
The main objective of this POC is to prove that text from a floating div (non-modal dialog) can be dragged and dropped onto input fields, replacing their value.