Zインデックススタックを扱うためのレデューサーの作成方法

Question

私はreactとreduxで作業していますが、私はレデューサーを作成しようとして問題に直面しています。基本的に、divのリストがあります。私がdivをクリックすると、Z-インデックス階層を維持しながら、より高いインデックスになるようにZ-インデックスを更新したいと思います。

はフィドルを参照してください： https://jsfiddle.net/pablodarde/mvv6chz3/

changeStack機能は私の減速のようなものです。

ここでは、notes配列を上位のインデックス（最後の要素、上位のインデックス）で並べ替えるようにしたいだけです。事前に

おかげ

HTML

<div id="container"> 
</div> 

はJavaScript

let notes = [ 
    { 
    id: 'one', 
    label: 'One', 
    }, 
    { 
    id: 'two', 
    label: 'Two', 
    }, 
    { 
    id: 'three', 
    label: 'Three', 
    }, 
    { 
    id: 'four', 
    label: 'Four', 
    }, 
]; 

const list = document.querySelector('#container'); 

notes.map((item) => { 
    const elem = document.createElement('div'); 
    elem.id = item.id; 
    elem.innerHTML = item.label; 
    list.appendChild(elem); 
}); 

const btn1 = document.querySelector('#one'); 
const btn2 = document.querySelector('#two'); 
const btn3 = document.querySelector('#three'); 
const btn4 = document.querySelector('#four'); 

btn1.addEventListener('click', function(e) { 
    changeStack(e.target.id); 
}); 

btn2.addEventListener('click', function(e) { 
    changeStack(e.target.id); 
}); 

btn3.addEventListener('click', function(e) { 
    changeStack(e.target.id); 
}); 

btn4.addEventListener('click', function(e) { 
    changeStack(e.target.id); 
}); 

function changeStack(id) { 
    let index = notes.length - 1; 
    notes = notes.map((item, idx) => { 
    if (idx === notes.length - 1) { 
     console.log('last: ', idx); 
     return notes[index]; 
    } else if (item.id == id) { 
     console.log('item.id == id: ', idx); 
     index = idx; 
     return notes[idx + 1]; 
    } else if (item.id > id) { 
     console.log('item.id > id: ', idx); 
     return item; 
    } else { 
     console.log('else: ', idx); 
     return item; 
    } 
    }); 
    console.log(notes); 
} 

CSS

body, html { 
    width: 100%; 
    height: 100%; 
} 

#container { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    background: #ddd; 
} 
#one, #two, #three, #four { 
    position: absolute; 
    width: 120px; 
    height: 120px; 
    background: #990; 
    box-shadow: 2px 2px 2px rgba(0,0,0,.4); 
    border: 1px solid rgba(0,0,0,.4); 
} 

#one { 
    top: 0; 
    left: 0; 
    z-index: 10; 
} 

#two { 
    top: 40px; 
    left: 40px; 
    z-index: 20; 
} 

#three { 
    top: 80px; 
    left: 80px; 
    z-index: 30; 
} 

#four { 
    top: 120px; 
    left: 120px; 
    z-index: 40; 
} 

Answer 1

いくつかの調査の後、私は希望の目標に到達する方法を考え出しました。これを行うもっとエレガントな方法があれば教えてください。

更新フィドル： https://jsfiddle.net/pablodarde/5ducueqg/7/

更新されたコード：

HTML

<div id="container"> 
</div> 

はJavaScript

let notes = [ 
    { 
    id: 'note_1', 
    label: 'One', 
    }, 
    { 
    id: 'note_2', 
    label: 'Two', 
    }, 
    { 
    id: 'note_3', 
    label: 'Three', 
    }, 
    { 
    id: 'note_4', 
    label: 'Four', 
    }, 
]; 

const list = document.querySelector('#container'); 

function setListeners(elems) { 
    for(elem of elems) { 
    elem.addEventListener('click', function(e) { 
     changeStack(e.target.id); 
    }); 
    } 
} 

function stackElements() { 
    while (list.firstChild) { 
    list.removeChild(list.firstChild); 
    } 

    notes.map((item, idx) => { 
    const elem = document.createElement('div'); 
    elem.id = item.id; 
    elem.innerHTML = item.label; 
    elem.style.zIndex = idx; 
    list.appendChild(elem); 
    }); 
    let btns = document.querySelectorAll('#container div'); 
    setListeners(btns); 
} 

stackElements(); 

function changeStack(id) { 
    id = id.substr(5); 

    // if is not the top element 
    if (id !== notes[notes.length - 1].id.substr(5)) { 
    let elem = notes[notes.length - 1]; 
    let index = notes.length - 1; 
    notes = notes.map((item, idx) => { 
     const _id = item.id.substr(5); 

     if (id === _id) { 
     elem = notes[idx]; 
     index = idx; 
     return notes[idx + 1]; 
     } else if (idx === notes.length - 1) { 
     return elem; 
     } else if (idx > index) { 
     return notes[idx + 1]; 
     } else { 
     return item; 
     } 
    }); 
    } 
    stackElements(); 
} 

CSS

body, html { 
    width: 100%; 
    height: 100%; 
} 

#container { 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 

#note_1, #note_2, #note_3, #note_4 { 
    position: absolute; 
    width: 120px; 
    height: 120px; 
    background: #ddd; 
    box-shadow: 2px 2px 2px rgba(0,0,0,.4); 
    border: 1px solid rgba(0,0,0,.4); 
} 

#note_1 { 
    top: 0; 
    left: 0; 
    z-index: 1; 
} 

#note_2 { 
    top: 40px; 
    left: 40px; 
    z-index: 2; 
} 

#note_3 { 
    top: 80px; 
    left: 80px; 
    z-index: 3; 
} 

#note_4 { 
    top: 120px; 
    left: 120px; 
    z-index: 4; 
}