Vue.js drag and drop text box components

Time:2021-8-30

The official account is simply transported to the site.

The first bullet is a drag and drop text box.

Drag and drop text box allows users to determine input by dragging alternatives to the text box. In fact, it can also be said to be a deformation of ComboBox. Compared with combobox, this component allows users to see all alternatives more intuitively, and multiple inputs can share a set of alternatives. Similar components have also been used in many apps such as 3D Windrose app and graph maker app.

preview gif

Register components


Register the drag and drop text box component (in fact, the encapsulated code Ctrl + C and Ctrl + V).

…


Vue.component("drag-and-drop-text-box", {
    template: "#drag-and-drop-text-box-template",
…

add component


Use custom labels directlyAdd a drag and drop text box component.

Transfer data


Transfer data to components, such as direct assignment of variable columns and input arrays. The variable columns corresponds to the names and attributes of all options, and the input corresponds to the label and selected value of each item.

columns:  [
{"name":"A","longname":"Copper"},
{"name":"B","longname":"Aluminum Aluminum"},
...
],
input: [
{text: "Material A", value: null},
{text: "Material B", value: null},
...
],
source code

Github

Recommended Today

Game architecture design – high performance parallel programming

catalogue CPU bound and memory bound Utilize CPU multi-core Physical core, logical core TBB parallel programming library task scheduling Parallel loop Common basic parallel algorithms Map Reduce (shrink) Scan Filter Parallel divide and conquer Parallel quick sort Concurrent container tbb::concurrent_vector application Thread pool Work stealing Lockless queue Job System dependence Multithread Render Single threaded rendering […]