h5를 사용하여 반응 드래그 앤 드롭 정렬 구성 요소를 구현하는 방법(코드 첨부)

이 기사는 h5를 사용하여 반응 드래그 앤 드롭 정렬 구성요소(코드 포함)를 구현하는 방법에 대한 것입니다. 필요한 친구가 참고할 수 있기를 바랍니다. 당신에게.

드래그 앤 드롭 정렬 컴포넌트 Github 주소: https://github.com/VicEcho/VD...

react.js 기술 스택을 사용하기 때문에, 포장에는 입출력이 우선적으로 부여됩니다. 페이지를 렌더링하고 데이터 드라이브에 따라 요소를 드래그하는 순서를 제어합니다.

IE8 등 이전 버전의 브라우저와의 호환성을 고려하지 않기 때문에 드래그 앤 드롭 효과는 HTML5 드래그 앤 드롭(Drag and drop)을 사용합니다. 물론, 풍부한 호환성이 필요하다면 마우스 클릭 관련 이벤트를 활용하는 것도 매우 간단합니다.

얻은 효과는 다음과 같습니다.

첫 번째 단계는 H5를 이해하는 것입니다. 드래그 앤 드롭 관련 속성, MDN에 대한 자세한 지침이 있습니다. 링크는 https://developer.mozilla.org...
한 가지 주목해야 할 점은 React.js가 모든 속성 이벤트 이름 앞에 ""를 추가한다는 것입니다. on"에 이어 낙타 케이스 쓰기가 이어졌습니다. 예를 들어 네이티브 클릭 이벤트의 경우 onClick 이벤트를 React.js에서 사용해야 합니다.

내 구성 요소에서 사용하는 드래그 앤 드롭 속성은 다음과 같습니다.

1. draggable true로 설정하면 현재 컨트롤을 드래그할 수 있습니다. # 🎜🎜#

2. onDragStart는 컨트롤이 드래그되기 시작할 때 발생하는 이벤트입니다. 다른 개체에서 쉽게 호출할 수 있도록 필요한 데이터를 개체에 저장하는 dataTransfer.setData() 메서드를 제공합니다. method#🎜🎜 #

onDragOver는 현재 컨트롤이 드래그된 구성요소를 받을 수 있는 방법을 지정합니다. 일반적으로 이 방법에서는 버블링이 방지됩니다.
onDragEnter는 드래그 후 마우스가 다른 허용 영역에 들어갈 때 트리거되며 이를 통해 이동 효과를 얻을 수 있습니다.
onDragLeave는 a를 b로 드래그할 때 트리거됩니다. b를 떠날 때 트리거됩니다. 이동 효과 제거 타이밍을 모니터링하는 데 사용할 수 있습니다
onDrop은 컨트롤이 유효한 상태로 "해제"될 때 트리거됩니다. 이 메서드에서 데이터를 처리하고 전달합니다. onChange 메서드를 호출하고 값을 상위 구성 요소에 노출합니다. onDrop은 "드래그된" 당사자가 설정해야 하는 속성입니다. 하지만 드래그 앤 드롭 정렬 구성 요소의 경우 각 요소를 드래그 앤 드롭합니다

6. 두 번째 단계는 "she"가 React.js의 구성 요소이므로 사용자 정의에 따라 간단히 입력합니다. 속성은 다음과 같습니다. 동시에 onChange 이벤트가 노출되어 값의 변경 사항을 수신하고 상위 구성 요소에 노출되어 정렬 필드로 사용할 키를 구성 요소에 알려줍니다.

   정렬이 포함되고 구성 요소 각 요소의 내부 하위 구성 요소를 지정할 수 있으므로 입력 데이터 형식을 배열 객체로 정의합니다. 여기서 콘텐츠는 반응 노드가 될 수 있습니다.

 value: [
                {
                    content: 'p1',
                    code: '01',
                    sort: 0,
                },
                {
                    content: 'p2',
                    code: '02',
                    sort: 1
                },
                {
                    content: 'p3',
                    code: '03',
                    sort: 2
                },
                {
                    content: 'p5',
                    code: '05',
                    sort: 5
                },
                {
                    content: 'p4',
                    code: '04',
                    sort: 4
                }]

값에 따라 I 정렬 가능한 구성 요소의 각 노드를 생성하기 위한 키 코드는 다음과 같습니다.

    // 生成拖拽组件
    createDraggleComponent(data, sortKey, style, uId) {
        return data.sort(this.compare(sortKey)).map((item) => {
            return (
                <p
                    className={styles.content}
                    key={item.code}
                    draggable={true}
                    onDragEnter={this.dragenter.bind(this)}
                    onDragLeave={this.dragleave.bind(this)}
                    onDragStart={this.domdrugstart.bind(this, item[sortKey], item.code, uId, item)}
                    onDrop={this.drop.bind(this, item[sortKey], data, sortKey, uId)}
                    onDragOver={this.allowDrop.bind(this)}
                    style={{ ...style }}>{item.content}</p>
            )
        })
    }
    render() {
        const { value, sortKey, style } = this.props;
        return (
            <Row>
                <p style={{ display: &#39;flex&#39;, flexDirection: &#39;row&#39; }}>
                    {this.createDraggleComponent(value, sortKey, style)}
                </p>
            </Row>
        )
    }

속성 메서드의 구체적인 구현:

    // 拖动事件
    domdrugstart(sort, code, ee) {
        ee.dataTransfer.setData("code", code);
        ee.dataTransfer.setData("sort", sort);
    }
    // 拖动后鼠标进入另一个可接受区域
    dragenter(ee) {
        ee.target.style.border = '2px dashed #008dff';
        ee.target.style.boxShadow = '0 0 8px rgba(30, 144, 255, 0.8)';
    }
    // a拖到b，离开b的时候触发
    dragleave(ee) {
        ee.target.style.border = '1px solid grey';
        ee.target.style.boxShadow = '';
    }
    // 对象排序
    compare(key) {
        return (obj1, obj2) => {
            if (obj1[key] < obj2[key]) {
                return -1;
            } else if (obj1[key] > obj2[key]) {
                return 1;
            }
            return 0
        }
    }
    // 当一个元素或是选中的文字被拖拽释放到一个有效的释放目标位置时
    drop(dropedSort, data, sortKey, ee) {
        ee.preventDefault();
        const code = ee.dataTransfer.getData("code");
        const sort = ee.dataTransfer.getData("sort");
        if (sort < dropedSort) {
            data.map(item => {
                if (item.code === code) {
                    item[sortKey] = dropedSort;
                } else if (item[sortKey] > sort && item[sortKey] < dropedSort + 1) {
                    item[sortKey]--;
                }
                return item;
            });
        } else {
            data.map(item => {
                if (item.code === code) {
                    item[sortKey] = dropedSort;
                } else if (item[sortKey] > dropedSort - 1 && item[sortKey] < sort) {
                    item[sortKey]++;
                }
                return item;
            });
        }
        this.props.onChange(data)
    }
    allowDrop(ee) {
        ee.preventDefault();
    }

주목할 점은 단 하나뿐입니다. 순서를 제어할 때 실제로 노드를 조작하기 위해 .target.before(document.getElementById({id}))를 사용하지 않고 대신 onDrop 시간이 트리거될 때마다 데이터 정렬을 처리하여 노출시켰습니다. onChange 이벤트를 통해 상위 구성요소를 생성하고 순서를 제어하기 위해 값을 변경하여 가상 DOM을 다시 렌더링하도록 트리거합니다.

회사의 요구사항에 따라 이를 기반으로 드래그 앤 드롭 복사 기능도 구현했습니다.

관련 권장 사항:

HTML5 새 속성: classList 속성 사용 방법

HTML5 여백 상단 붕괴 문제 해결 방법(코드 포함)

HTML5의 태그와 공통 규칙은 무엇인가요? HTML5 태그 및 규칙 소개

위 내용은 h5를 사용하여 반응 드래그 앤 드롭 정렬 구성 요소를 구현하는 방법(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!