a small incremental UI library for the web
javascript
web
ui
Add drag/drop indicator
+27
-2
+27
-2
demos/todo/todo.tsx
+27
-2
demos/todo/todo.tsx
···
100
100
<div>{completeCount} items completed</div>
101
101
<button disabled={completeCount === 0} onClick={clearComplete}>Clear completed</button>
102
102
</div>
103
-
<div class="items">{items.map(item => <Item item={item} toggleComplete={toggleComplete} />)}</div>
103
+
<div class="items">{items.map(item => <Item {...{item, toggleComplete}} />)}</div>
104
104
</div>
105
105
);
106
106
}
···
156
156
}
157
157
158
158
function Item({item, toggleComplete}) {
159
+
const [dropStatus, setDropStatus] = useState(null);
160
+
159
161
useStyle(`
160
162
label {
161
163
padding: 8px;
···
166
168
label:not(:last-child) {
167
169
border-bottom: 1px solid black;
168
170
}
171
+
172
+
.top {
173
+
border-top: 2px solid blue !important;
174
+
}
175
+
.bottom {
176
+
border-bottom: 2px solid blue !important;
177
+
}
169
178
`);
170
179
171
180
return (
172
-
<label>
181
+
<label
182
+
class={dropStatus}
183
+
draggable="true"
184
+
onDragLeave={ev => {
185
+
setDropStatus(null);
186
+
}}
187
+
onDragOver={ev => {
188
+
const {clientY} = ev;
189
+
const {y: elY, height: elHeight} = ev.target.getBoundingClientRect();
190
+
191
+
const y = clientY - elY;
192
+
const top = y < (elHeight / 2);
193
+
194
+
if (top) setDropStatus('top');
195
+
else setDropStatus('bottom');
196
+
}}
197
+
>
173
198
<input
174
199
type="checkbox"
175
200
checked={item.complete}