in a nutshell, mark the selected and unselected items, and change the state when the item is selected. Let the selected display on the left and the unselected on the right. If the order on the left and right is the same, just control the display and hide. If it is inconsistent, reorder during the display or reorder for the first time, and then select insert at a later stage.
Let's start with the most primitive method to implement
class Dispatcher {
constructor() {
this._event = [];
}
on(eventName, fn) {
var subscription = {
eventName,
callback: fn
};
this._event.push(subscription);
return this;
}
off(eventName, fn) {
this._event = this._event.filter(
subscription => !(subscription.eventName === eventName && (fn ? subscription.callback === fn : true))
);
return this;
}
emit(eventName, ...data) {
this._event.forEach(subscription => {
if (subscription.eventName === eventName) {
subscription.callback(...data);
}
});
return this;
}
}
var leftList = [
{productId: 10006},
{productId: 10031},
{productId: 10016},
{productId: 10017},
];
var leftList = leftList.map((item, index) => ({...item, order: index,}));
var rightList = [];
var dispatch = new Dispatcher();
dispatch.on('select', function(product) {
leftList = leftList.filter(_product => product !== _product);
rightList.push(product);
});
dispatch.on('unselect', function(product) {
rightList = rightList.filter(_product => product !== _product);
leftList.push(product);
});
dispatch.emit('select', leftList[0]);
console.log('leftList: ', [...leftList],'\n', 'rightList', [...rightList]);
dispatch.emit('unselect', rightList[0]);
console.log('leftList: ', [...leftList],'\n', 'rightList', [...rightList]);
then say a comparison of Vue, the left and right columns should be counted as the communication between sibling components, and the code of the component and the code of the view should be in two js files. Component communication can be done through child component 1-> parent component-> child build 2, but it is troublesome.
I feel like I can use Vuex.
Please indicate the order on the right
