特定の兄弟要素を取得したい

流れ：

全体ソースコードより、
・ダブルクリックで要素(テキストエリア)を作成。
・右クリックメニューで要素の選択をクリックするとテキストエリアの左下にチェックボックスが表示される(再度押すとチェックボックス非表示)
・テキストエリアをクリック(mousedown)→ドラッグ(mousemove)するとテキスエリアとチェックボックスが一緒に移動する
・テキストエリアをもう一度作成する(現在の状態はテキストエリアとチェックボックスのペアと、テキストエリアのみ)
・この状態でテキストエリアとチェックボックスのペアを移動するとテキストエリアのみしか移動しない

やりたいこと：

テキストエリアとチェックボックスのペアは同時に移動することができ、
テキストエリアのみの場合はテキストエリアのみ移動できるようにしたい。

それを実現する為に、特定の兄弟要素のみをを取得できるようにしたいと考えています。
例えば、if分の条件式で兄弟要素のタグ名やクラス名が.brotherだった場合に処理を実行するといったようなことを行いたい。

現在のソースコードはif分(checkAll.length == taAll.length)(チェックボックスとテキストエリアの数が一緒) という条件式なので当然やりたい動作にならないが、
テキストエリアのとチェックボックスのペアと、テキストエリアのみが混在した場合でも、
テキストエリアとチェックボックスのペアは同時に移動することができ、
テキストエリアのみの場合はテキストエリアのみで移動できるようにしたい。

ifの条件式でもっと簡単な方法で解決できましたら教えて頂ければと思います。
この状況だと特定の兄弟要素を取得する事でしか解決できないと思ったので、
今回の質問内容とさせて頂きました。

何卒お願い致します。

試してみたこと：

兄弟要素を取得するnextElementSibling、previouselementsiblingを条件式として使用し作成を考えてみたが、
このプロパティは指定した要素の兄弟要素を取得できるが、クラス名やタグ名などを指定して特定の兄弟要素を取得できるものではない。

全体ソースコード：

https://codepen.io/mio-rei/pen/LYWzJqq

ソースコード抜粋：

JavaScript
1// オブジェクト内関数
2    const obj = {};
3
4    obj.setPos = (e, o={x:0, y:0}) =>{
5    let p = pLim( pos(e, o) );
6    obj.elm.style.left = p.x + 'px';
7    obj.elm.style.top = p.y + 'px';
8    if(checkAll.length == taAll.length) {
9        obj.elm.previousElementSibling.style.left = p.x - 15 + 'px';
10        obj.elm.previousElementSibling.style.top = p.y + 15 + 'px';
11    }
12    };
13
14
15// マウスダウン(要素の移動　初期動作)
16    const mouseDown = (e) => {
17        let t =e.target;
18        if(t.nodeName != 'IMG' && t.nodeName != 'TEXTAREA') return;
19        obj.elm = t;
20        obj.setOffset(e);
21        if ( e.clientX - t.getBoundingClientRect().left < 5 ||
22             e.clientY - t.getBoundingClientRect().top < 5) {
23 
24                obj.setOffset(e);
25                obj.setPos(e,obj);
26                console.log('test成功です');
27                element.addEventListener('mousemove', mousemove);
28        } else {
29              console.log('test');
30              element.addEventListener('mousemove', mouseMove);
31           
32        }
33    };
34
35
36// マウスムーブ(要素の移動)
37    const mouseMove = (e) => {
38        if(!obj.elm ) return;
39        obj.setPos(e, obj);
40        obj.setOffset(e);
41        };
42

itagagaki

2021/05/30 02:01

CodePenではJavaScriptの206行目で Uncaught TypeError: Cannot read property 'style' of null が出るためそれ以上調査できません。修正してください。

rei78087487

2021/05/31 00:23

お手数をおかけします。修正しました。何卒ご教示お願い致します。

itagagaki

2021/05/31 16:30

チェックボックスを生成しているのはどこですか？

rei78087487

2021/06/01 01:14 編集

まず<div class="canvas-parent">がノートページの様な要素です。テキストエリア、チェックボックスが作成される際、下記の様に要素が作成されています。 <div class="canvas-parent"> 　　<div class="ipta-parent> 　　 <input type="checkbox" class="ip-check"> 　　　 <textarea ></textarea> 　 </div> </div> まず<div class=ipta-parent></div>を作成して、その子要素としてチェックボックスを作成しています。ソースコードは、CodePenのJavaScript、８０行～になります。お願い致します。

itagagaki

2021/06/01 11:04

つかんで動かすのはテキストエリアのleftとtopを変えているのですね。でもそれではチェックボックスは動かないのではないですか？逆に、最初はどうして動いているんでしょう？

rei78087487

2021/06/02 07:50

お世話になっております。はい、テキストエリアを移動する場合はleftとtopを変えています。実際にこれでは単体の要素しか（テキストエリア）しか動かせないです。最初にチェックボックスが同時に動いているのは、テキストエリアの兄弟要素(チェックボックス)をpreviousElementSiblingで取得することにより、テキストエリアと同時に動かしています。でもこれは条件が限定的で、チェックボックスとテキストエリアの数が一緒の時しか同時に動きません。前述の「流れ」の様に、テキストエリアとチェックボックスのペアと、テキストエリアが単体の場合が混在した状態で、同時に動かせるようにしたいです。何卒ご教示頂きたくお願い致します。

itagagaki

2021/06/02 09:38 編集

いくつかの案がありますが、テキストエリアもチェックボックスも、自身にマウスダウンされたとき、親要素を調べ、それがipta-parentクラスだったら、その親要素のleftとtopを動かすようにしたらどうでしょう？もしかしたらposition: absoluteのためにipta-parentにもさらに親のボックスが必要になるかもしれませんね。

rei78087487

2021/06/09 05:23

if文を下記に変更する事によって解決出来ました。 if(obj.elm.closest('.ipta-parent') { obj.elm.previousElementSibling.style.left = p.x - 15 + 'px'; obj.elm.previousElementSibling.style.top = p.y + 15 + 'px'; 教えて頂き本当にありがとうございました。