时间戳

首页 > 解决方案 > 如何强制特定的 div 可拖动不能在父 div 之外

javascript - 如何强制特定的 div 可拖动不能在父 div 之外

问题描述

我正在开发一个可拖动的垂直列表来使用 react 拖放行。

我创建了一个名为 placeholder 的类名的 div，这个特定的 div 用于在其他 div 之间创建一个空间，它将被放置。

我的问题是，这个特定的div，怎么可以拖动，可以拖出包含它的div。并告诉我下一个错误，因为它在外面：

NotFoundError：无法在“节点”上执行“removeChild”：要删除的节点不是该节点的子节点。

怎样才能使这个特定的div不能在已经创建的div之外？

在此处输入图像描述

这是代码：

import React, { Component } from 'react';

import Item from '../Item';
import './list.scss';

let placeholder = document.createElement("div");
placeholder.className = "placeholder";

class DraggableVerticalList extends Component {
  constructor(props) {
    super(props);
    this.state = {...props};
  }

  dragStart = (e) => {
    this.dragged = e.currentTarget;
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this.dragged);
  };

  dragEnd = (e) => {
    this.dragged.style.display = 'block';
    this.dragged.parentNode.removeChild(placeholder);
    // update state
    var data = this.state.colors;
    var from = Number(this.dragged.dataset.id);
    var to = Number(this.over.dataset.id);
    if(from < to) to--;
    data.splice(to, 0, data.splice(from, 1)[0]);
    this.setState({ colors: data });
  };

  dragOver = (e) => {
    e.preventDefault();
    this.dragged.style.display = "none";
    if(e.target.className === 'placeholder') return;
    this.over = e.target;
    e.target.parentNode.insertBefore(placeholder, e.target);
  };

  render() {
        return (
            <div className="draggable-container" onDragOver={this.dragOver.bind(this)}>
        { this.state.colors.map((item, i) => {
          return ( 
            <div className="item" data-id={i} key={i} draggable='true' onDragEnd={this.dragEnd.bind(this)} onDragStart={this.dragStart.bind(this)}>
              <Item item={item} key={i} />
            </div>
          )})}
      </div>
        );
    }
}

export default DraggableVerticalList;

他的css文件：

.draggable-container {
    width: 100%;
    height: 100%;
    padding: 10px 10px;
    background-color: rgb(233, 201, 201);
    border-radius: 10px;

    .draggable-list {
        padding: 5px;
    }
}

.placeholder {
    background: rgb(255,240,120);
    width: 100%;
    height: 40px; 
    &:before {
        content: "Drop here";
        color: rgb(225,210,90);
    }
}

标签： javascriptreactjs

解决方案

解决了：

  dragOver = (e) => {
    e.preventDefault();

    /* With this line div cant be outside */
    if (e.target.className === 'draggable-container') return;

    this.dragged.style.display = "none";
    if(e.target.className === 'placeholder') return;
    this.over = e.target;
    e.target.parentNode.insertBefore(placeholder, e.target);
  };

推荐阅读