画像を並べ替えた順にスライドショー化したい

以下のサイトを参考に，画像を並べ替えた後，並べ替えた順に別ウィンドウで簡単なスライドショーを表示させるプログラムを組みたいです。（javascript,HTML）

ドラッグアンドドロップ参考サイト

サイト内を例に挙げると，「リンゴ」「みかん」「ブドウ」の画像を，任意の場所にドラッグアンドドロップし，左から順に「みかん」「ブドウ」「リンゴ」に並べ替えると，その順番通りにスライドショーが作成されるといったイメージです。

並べ替えまでは上記のサイトを参考にうまくいくのですが，そのあとの座標取得，スライドショー作成の方法がわかりません。

Lhankor_Mhy

2020/10/20 08:32

スライドショーを自前で実装するのはしんどいと思います。プラグインを探した方がいいのでは。

退会済みユーザー

2020/10/21 05:39

わかりました。少し探してみます。

行動規範の内容に同意します

回答1件

質問者は退会してますが、できたので置いときます。

html+css+Js
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7    <style>
8
9        body {
10            text-align: center;
11            overflow: hidden;
12            margin: 0;
13        }
14
15        .BtnWrap {
16            width: 400px;
17            height: 100px;
18            position: absolute;
19            top: 50%;
20            left: 50%;
21            transform: translateY(-50%) translateX(-50%);
22        }
23
24        button {
25            width: 100px;
26            height:100px;
27            display: inline-block;
28            position: absolute;
29            -webkit-appearance: none;
30            appearance: none;
31            vertical-align: middle;
32            border: 0;
33            padding: 0;
34            margin: 0;
35            outline: 0;
36            border-radius: 0;
37        }
38
39        .DropItem {
40            width: 100px;
41            height:100px;
42            display: block;
43            border: 0;
44            padding: 0;
45            margin: 0;
46            border-radius: 0;
47        }
48
49        .DragBtn:nth-child(1) {
50            left:0;
51        }
52
53        .DragBtn:nth-child(2) {
54            margin-left: -50px;
55        }
56
57        .DragBtn:nth-child(3) {
58            right:0;
59        }
60
61        #ModalBtn {
62            margin-top: 300px;
63            width: 200px;
64            height: 50px;
65            background-color: rgba(0, 0, 0, 0.685);
66            color: rgb(255, 255, 255);
67            text-align: center;
68            font-size:16px;
69            position: absolute;
70            bottom: 50px;
71            left:50%;
72            transform: translate(-50%);
73            z-index: 10;
74        }
75
76        .ModalWrap {
77            position: relative;
78            width: 100%;
79            height: 100vh;
80            background-color: rgba(0, 0, 0, 0.5);
81            z-index: 0;
82        }
83
84        .SliderWrap {
85            width: 700px;
86            height:420px;
87            position: relative;
88            top:50%;
89            left:50%;
90            transform: translate(-50%,-50%);
91            font-size: 0;
92            overflow: hidden;
93        }
94
95        .SliderItemWrap {
96            width: 2100px;
97        }
98
99        .SliderItem {
100            width: 700px;
101            height: 420px;
102            display: inline-block;
103        }
104
105        .SliderCtrlLeft {
106            width: 50px;
107            height:50px;
108            top:50%;
109            left:0;
110            transform: translateY(-50%);
111            background-color: rgba(0, 0, 0, 0.5);
112        }
113
114        .SliderCtrlRight {
115            width: 50px;
116            height:50px;
117            top:50%;
118            right:0;
119            transform: translateY(-50%);
120            background-color: rgba(0, 0, 0, 0.5);
121        }
122
123        .hide {
124            display: none;
125        }
126
127    </style>
128</head>
129<body>
130
131<div class="BtnWrap">
132    <button class="DragBtn"><span class="DropItem"></span></button>
133    <button class="DragBtn"><span class="DropItem"></span></button>
134    <button class="DragBtn"><span class="DropItem"></span></button>
135</div>
136
137<div class="ModalWrap hide">
138    <div class="SliderWrap">
139        <div class="SliderItemWrap">
140            <span class="SliderItem"></span>
141            <span class="SliderItem"></span>
142            <span class="SliderItem"></span>
143        </div>
144        <button class="SliderCtrlLeft">
145            <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
146        </button>
147        <button class="SliderCtrlRight">
148            <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
149        </button>
150    </div>
151</div>
152
153<button id="ModalBtn">
154    スライドショー作成
155</button>
156
157<script>
158
159const btn = document.getElementsByTagName("button");
160const dropItem = document.getElementsByClassName("DropItem");
161btn[0].style.backgroundColor = "rgb(127, 255, 212)";
162btn[1].style.backgroundColor = "rgb(255, 221, 127)";
163btn[2].style.backgroundColor = "rgb(255, 127, 227)";
164dropItem[0].style.backgroundColor = "rgba(127, 255, 212,0.5)";
165dropItem[1].style.backgroundColor = "rgba(255, 221, 127,0.5)";
166dropItem[2].style.backgroundColor = "rgba(255, 127, 227,0.5)";
167
168
169for(let i = 0; i<3; i++) {
170
171    btn[i].onmousedown = () => {
172        dropItem[i].style.position = "absolute";
173        dropItem[i].style.top = "0px";
174        dropItem[i].style.left = "0px";
175        dropItem[i].style.zIndex = "1";
176        document.addEventListener("mousemove", mouseMove);
177    }
178
179    const clientRect = dropItem[i].getBoundingClientRect();
180
181    window.addEventListener("mouseup", () => {
182        const x = event.clientX;
183        const y = event.clientY;
184        if(dropItem[i].style.position == "absolute"){
185            dropPosition(x,y,i);
186        }
187
188        document.removeEventListener("mousemove", mouseMove);
189        dropItem[i].style.position = "";
190        dropItem[i].style.zIndex = "";
191    });
192
193    const mouseMove = () => {
194        const x = event.clientX;
195        const y = event.clientY;
196        const width = dropItem[i].offsetWidth;
197        const height = dropItem[i].offsetHeight;
198        dropItem[i].style.top = (y - height * 0.5)  - clientRect.top + "px";
199        dropItem[i].style.left = (x - width * 0.5) - clientRect.left + "px";
200}
201}
202
203    const dropPosition = (x,y,num) => {
204        for (let i =0;i<3;i++ ) {
205        const clientRectX = btn[i].getBoundingClientRect().left;
206        const clientRectY = btn[i].getBoundingClientRect().top;
207        if(x >= clientRectX && x <= clientRectX + 100){
208            const defaultBtnColor = btn[i].style.backgroundColor;
209            const defaultSpanColor = dropItem[i].style.backgroundColor;
210            btn[i].style.backgroundColor = btn[num].style.backgroundColor;
211            dropItem[i].style.backgroundColor = dropItem[num].style.backgroundColor;
212            btn[num].style.backgroundColor = defaultBtnColor;
213            dropItem[num].style.backgroundColor = defaultSpanColor;
214        }
215    }
216    }
217
218    const modalBtn = document.getElementById("ModalBtn");
219    const modalWrap = document.getElementsByClassName("ModalWrap")[0];
220    const sliderItem = document.getElementsByClassName("SliderItem");
221
222    modalBtn.addEventListener("click", () => {
223        modalWrap.classList.toggle("hide");
224        if(modalWrap.classList.contains("hide")) {
225            modalBtn.innerText = "スライドショー作成";
226            SliderItemWrap.style.transform = "translateX(0px)"
227        } else {
228            modalBtn.innerText = "閉じる";
229        }
230
231        for(let i =0; i <3; i++) {
232            sliderItem[i].style.backgroundColor = "" + btn[i].style.backgroundColor
233        }
234
235    });
236
237    const slidBtnLeft = document.getElementsByClassName("SliderCtrlLeft")[0];
238    const slidBtnRight = document.getElementsByClassName("SliderCtrlRight")[0];
239    const SliderItemWrap = document.getElementsByClassName("SliderItemWrap")[0];
240
241    slidBtnLeft.addEventListener("click", () => {
242        if(!SliderItemWrap.style.transform || SliderItemWrap.style.transform == "translateX(0px)") {
243            SliderItemWrap.style.transform = "translateX(-1400px)"
244        } else if(SliderItemWrap.style.transform == "translateX(-1400px)") {
245            SliderItemWrap.style.transform = "translateX(-700px)"
246        } else {
247            SliderItemWrap.style.transform = "translateX(0px)"
248        }
249    });
250
251    slidBtnRight.addEventListener("click", () => {
252        if(!SliderItemWrap.style.transform || SliderItemWrap.style.transform == "translateX(0px)") {
253            SliderItemWrap.style.transform = "translateX(-700px)"
254        } else if(SliderItemWrap.style.transform == "translateX(-700px)") {
255            SliderItemWrap.style.transform = "translateX(-1400px)"
256        } else {
257            SliderItemWrap.style.transform = "translateX(0px)"
258        }
259    });
260
261
262
263</script>
264</body>
265</html>