Introduction to the design and implementation of elect controls

Because the left and right controls are used in the project, some related implementations are found on the internet, basically there are two:
1. JQuery UI-based controls:
 
This looks like a good style, and its functions are quite complete, but it is a bit awkward to choose from the traditional method on the left to the right.
2. A control handwritten by a brother:
 
This meets my needs. It is simple and practical, but it does not meet my other needs. My needs are that the selection box on the right needs to be able to select images of different colors, and this style is a bit unsightly.

I wrote one by myself. It took me a long time to get it done. I will share it with you:
 
This satisfies both my functional needs and my style requirements.
For color selection, I reference a third-party plug-in jquery. colorPicker. js. I like simple, practical, and beautiful things.
There are too many codes that are inconvenient to post. Let's talk about my implementation. The left and right controls use the jQuery easy UI datagrid Control. I also tried several controls, only this meets my requirements. Of course, some operations have been made for the datagrid to remove the title and manually modify the style. The logic of left and right selection is basically the same as that of upper and lower control, that is, some methods of the datagrid are called for implementation. Of course, there are also a lot of logical control on the gray button of this control, the purpose is to make it easier for users to use.