javascript - 当用户在页面上移动 div 时显示 div 的原始位置

Question

我有一个可排序的列表。

当用户拖动列表项时，我想风格化元素的原始位置，直到用户停止拖动。

沿着这条线:

在这种情况下，列表中的空白区域周围有一个边框，表示 Poland Spring 的原始位置。

我最初的想法是直接在每个 li 元素后面放置一个容器 div。然而，为了让它工作，容器 div 需要是 position:relative 并且 li 元素需要是 position:absolute 但为了列表的目的，li 项需要是position:relative。

这是我的相关代码:

import styled from '@emotion/styled';

const App = styled('div')`
    font-family: sans-serif;
    font-size: 1.5rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

    ul {
        margin: 0;
        padding: 0;
        list-style: none; !important
    }

    ul li {
        background-color: #D3D3D3;
        padding: 10px 20px;
        position: relative;
        //the line below does not work
        //position: absolute;
        display: flex;
        line-height: 1;
        list-style-type: none;
        border-style: solid;
        margin-top:10px;
        cursor: pointer 

    }
`;
const Container = styled('div')`
    background: red;
    border-color: coral;
    position: relative;
`;
class DragDropList extends React.Component {
*/ ....*/
onDragStart = (e, index) => {
        this.draggedItem = this.state.items[index];
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('text/html', e.target.parentNode);
        //e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
    };

    onDragOver = index => {
        const draggedOverItem = this.state.items[index];

        // if the item is dragged over itself, ignore
        if (this.draggedItem === draggedOverItem) {
            return;
        }

        // filter out the currently dragged item
        let order = this.state.order.filter(item => item !== this.draggedItem);

        // add the dragged item after the dragged over item
        order.splice(index, 0, this.draggedItem);

        this.setState({ order });
    };

    onDragEnd = index => {
        this.draggedIdx = null;
        // filter out the currently dragged item
        let items = this.state.order;
        this.setState({ items });
    };

    render() {
        return (
            <App>
                <main>
                    <ul>
                        {this.state.items.map((item, idx) => (
                            <div>
                                <Container>
                                    <li
                                        key={item + `idx`}
                                        onDragOver={() => this.onDragOver(idx)}
                                        draggable
                                        onDragStart={e =>
                                            this.onDragStart(e, idx)
                                        }
                                        onDragEnd={() => this.onDragEnd(idx)}
                                    >
                                        <div
                                            draggable
                                            onDragStart={e =>
                                                this.onDragStart(e, idx)
                                            }
                                            onDragEnd={() =>
                                                this.onDragEnd(idx)
                                            }
                                        >
                                            <span
                                                className="content"
                                                style={{ cursor: 'pointer' }}
                                            >
                                                {item}
                                            </span>
                                        </div>
                                    </li>
                                </Container>
                            </div>
                        ))}
                    </ul>
                </main>
            </App>
        );
    }
}

这是一个沙箱:https://codesandbox.io/s/black-dust-hqm2t?fontsize=14

Answer 1

不确定这是否是最好的方法，但我通过将拖动的索引存储在状态中并添加一个简单的条件来更改拖动项的 CSS 来更改 className 如果它匹配拖动的索引。要达到您发布的确切效果，可能需要更多的 CSS 技巧或其他条件渲染，但这应该涵盖基本功能。

Forked sandbox .