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

Question

我有一个可排序的列表。

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

沿着这条线：

在这种情况下，列表中的空白 space 周围有一个边框，表示波兰 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

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

Forked sandbox.

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

Show div's original position as user moves div across page

javascript

css

drag-and-drop

draggable

reactjs