Question

我正在做所有这些事情以在svg g标签子元素中实现（使用html滚动和可排序列表）。 [please find the image for the issue]

<svg width="1200" height="1200" onDrop={this.onDrop} onDragOver={this.onDragOver} 
         xmlns="http://www.w3.org/2000/svg">

 // if i keep <Simple /> react sortable component here then it's working

   <g>
      <g className="node-group" id={`parent-node-${id}`} data-id={id} data-x={x} data-y={y} 
         transform={`translate(${x}, ${y})`>
          <g id="onExit" className="onExit" data-id={id} >
            <rect id="onExit" x="0" y="200" width={width} fill="#fff" height="70" ></rect>

            <foreignObject className="forenobjexit" x="0" y="200" width={width} height="170">
                <div xmlns="http://www.w3.org/1999/xhtml">

                    <Simple /> //only displays list but drag drop not working 

                </div>

            </foreignObject>

         </g>
     </g>
  </g>
</svg>

Any suggestions why sortable react component is not working inside child svg element under foreignObject tag means only html list is displaying but sorting and dragging of list is not working

以下代码用于反应可排序列表

import React, { useState } from "react";
import { List, arrayMove } from "react-movable";

export default function Simple() {
  const [items, setItems] = useState(["Item 1", "Item 2", "Item 3"]);

  return (

    <List
      values={items}
      onChange={({ oldIndex, newIndex }) =>
        setItems(arrayMove(items, oldIndex, newIndex))
      }
      renderList={({ children, props }) => <ul {...props}>{children}</ul>}
      renderItem={({ value, props }) => <li {...props}>{value}</li>}
    />
  );
}

当我保留在svg标签中时，可排序列表有效，但是如果我将其保留在子矩形svg组件下方，则它不起作用

如何在子svg元素的foreignObject中呈现可排序列表React-component

0 个答案: