要素の内側をサブ要素として削除する方法またはサブロップ可能なエリアを作る方法は? -- reactjs フィールド と drag-and-drop フィールド と react-beautiful-dnd フィールド 関連 問題

how to drop inside an element as a sub element? or how to make a sub droppable area?












0
vote

問題

日本語

ドラッグ可能なコンポーネントは、次のコードで<コード> Drop 関数の内側にあります。これは、それらを並べ替えるために要素をドラッグアンドドロップできることを意味しますが、他のElMeentsの内側になるように選択したい場合はどうなります。例えば、 後方牽引要素

を参照してください <事前> <コード> <div> maing element </div> <div> sub element </div>

要素をドラッグして他の要素の上にドロップすると、次の形式

がNIになります。 <事前> <コード> <div> maing element <div> sub element </div> </div> <事前> <コード> import React, { useState } from 'react'; import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd' import Components from '../Actions/Components'; const grid = 8 function DND({ View, elements, boxStyle, elementsStyle, display, direction }) { const [state, set] = useState(elements) const [anchorEl, setAnchorEl] = useState(null); function Drag() { return ( <div style={{ display: display }}> {state.map((e, index) => ( <div key={index}>{ e.type === 'column' && <Components View={View} Indexing={index} anchorEl={anchorEl} setAnchorEl={setAnchorEl} elementsStyle={elementsStyle} state={state} set={set} e={e} /> } { e.type !== 'column' && <Draggable key={`${index}`} draggableId={`${index}`} index={index} > {(provided, snapshot) => ( <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} > <div> <Components style={{ color: 'red' }} View={View} Indexing={index} isDragging={snapshot.isDragging} anchorEl={anchorEl} setAnchorEl={setAnchorEl} elementsStyle={elementsStyle} state={state} set={set} e={e} /> </div> </div> )} </Draggable> } </div> ))} </div> ) } function Drop() { return ( <Droppable droppableId='droppable' direction={direction} > {(provided, snapshot) => ( <div ref={provided.innerRef} style={{ padding: grid, overflow: 'auto', height: '300px', ...boxStyle }} > {Drag(boxStyle, elementsStyle)} {provided.placeholder} </div> ) } </Droppable > ) } function reOrder(r) { const x = state const [removed] = x.splice(r.source.index, 1); x.splice(r.destination.index, 0, removed); setTimeout(() => { set(x) }, 0) } return ( <DragDropContext onDragEnd={reOrder}> {Drop(state, boxStyle, elementsStyle)} </DragDropContext > ) } export default DND
英語

dragable component is inside the Drop function in the following code is, which mean I can drag and drop elements to reorder them, but what if I want to drop elments to be inside other elmeents. For example, see the folowing tow elements

<div>   maing element </div>  <div>    sub element </div> 

when I drag an element and drop it over other element it will be ni the following form

<div>   maing element      <div>         sub element      </div> </div> 
import React, { useState } from 'react'; import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd' import Components from '../Actions/Components'; const grid = 8  function DND({ View, elements, boxStyle, elementsStyle, display, direction }) {        const [state, set] = useState(elements)       const [anchorEl, setAnchorEl] = useState(null);        function Drag() {              return (                   <div style={{ display: display }}>                         {state.map((e, index) => (                               <div key={index}>{                                     e.type === 'column' && <Components View={View} Indexing={index} anchorEl={anchorEl} setAnchorEl={setAnchorEl} elementsStyle={elementsStyle} state={state} set={set} e={e} />                               }                                     {                                           e.type !== 'column' && <Draggable key={`${index}`} draggableId={`${index}`} index={index} >                                                 {(provided, snapshot) => (                                                       <div                                                             ref={provided.innerRef}                                                             {...provided.draggableProps}                                                             {...provided.dragHandleProps}                                                       >                                                             <div>                                                                   <Components style={{ color: 'red' }} View={View} Indexing={index} isDragging={snapshot.isDragging} anchorEl={anchorEl} setAnchorEl={setAnchorEl} elementsStyle={elementsStyle} state={state} set={set} e={e} />                                                             </div>                                                       </div>                                                 )}                                           </Draggable>                                     }                               </div>                         ))}                   </div>             )       }       function Drop() {             return (                   <Droppable droppableId='droppable' direction={direction} >                         {(provided, snapshot) => (                               <div                                     ref={provided.innerRef}                                     style={{                                           padding: grid,                                           overflow: 'auto',                                           height: '300px',                                           ...boxStyle                                     }}                               >                                     {Drag(boxStyle, elementsStyle)}                                     {provided.placeholder}                               </div>                         )                         }                   </Droppable >             )       }        function reOrder(r) {             const x = state             const [removed] = x.splice(r.source.index, 1);             x.splice(r.destination.index, 0, removed);             setTimeout(() => {                   set(x)             }, 0)       }        return (             <DragDropContext onDragEnd={reOrder}>                   {Drop(state, boxStyle, elementsStyle)}             </DragDropContext >       ) } export default DND  
</div
        

回答リスト


関連する質問

0  ドラッグアンドドロップ:要素がドロップされたときに動的に列を作成する  ( Drag and drop create columns dynamically when the element is dropped ) 
React-Beautiful-DNDを使用して、以前に作成された列にコピーして要素ドロップを使用しています。 しかし、私が要素をドラッグしてドロップしたときに可能な可能性があるか疑問には、それをドロップするために列を動的に作成しますか?私はそれを作ることが...

0  React-Beautifull-DNDのオリジナルのドロップ可能な領域にドラッグ可能なアイテムを返す方法  ( How to return a draggable item to its original droppable area in react beautifu ) 
ユースケース リストからタイムテーブルにコースをドラッグしたい。 ユーザーがタイムテーブルのコースを削除すると、タイムテーブルに描画されます。 私はそれが来たリストに戻ったコースを望んでいます。 成分木 レイアウト(DragDropContext、これは...

9  美しいDNDを位置の問題から引き出すに反応します  ( React beautiful dnd drag out of position problem ) 
ドラッグ可能なドラッグアンドドロップテーブルをドラッグ可能な行で作成しました。 このために react beautiful-dnd を使用しています。 行をドラッグすると、その行は私のカーソルの位置に代わりに位置から切り離されます。 行をドラッグすると、行は ...

0  React-Beautiful-DNDシンプルなリストで動作しない  ( React beautiful dnd not working on simple list ) 
React-Beautiful-DNDを使用しようとしています。私はドキュメントをフォローしており、エラーがポップアップされていません。しかし、私のリストはドラッグ可能で脱落可能ではありません。これが私のコードです <事前> <コード> <Scrollbar...

0  React-Beautiful-DNDとその他のドラッグパッケージの衝突  ( Collision between react beautiful dnd and other dragging package ) 
私は1つのアプリでD3 ParcordsとMaterial-Tableを一緒に使用しようとしています。 各コンポーネントはよく個人が機能します。しかし、それらが一緒にレンダリングされると、React-Beautiful-DNDの中で問題が発生します。 D3 P...

1  React-Beautiful-Dndのサイズ変更  ( Resize react beautiful dnd ) 
滴下容器の高さを調整することは可能ですか?私はインラインスタイリングを試しました <コード> <Droppable droppableId="list" style={{ height: 200 }}> しかし期待された結果をもたらしませんでした。私の期...

0  美しいドラッグアンドドロップで状態を設定します  ( Setting a state in beautiful drag and drop ) 
私は美しいDNDドラッグアンドドロップコンポーネントを持つReactアプリを作成しています。その項目が特定の列にドラッグされているときに、ドラッグ可能な項目の特性( 'ID')に等しいステートフル変数を設定します。 ドラッグアンドドロップコンポーネントの値 <...

1  AntDテーブルを用いた反応美しいDNDにおける奇妙な影響  ( Weird effect in react beautiful dnd with antd table ) 
私はAntDテーブルで美しいDNDを使用してドラッグアンドドロップ機能を実装しています。 すべてがうまくいっていますが、私は以下の奇妙な効果を持っています。 アイテムをドラッグして元の場所に落としたときにこの効果が発生します。 AntDとReac...

4  美しいDND - ドラッグ可能なデータの渡しを渡す  ( Beautiful dnd passing draggable data ondropend ) 
私のドラッグ可能な要素で利用可能ないくつかのデータを持っています。そのデータのondragendを使用したいのですが、 draggableId を除く draggableId を除くすべてのドラッグ可能なデータを渡す方法は見つかりませんでした。 。 基本的に私...

0  要素の内側をサブ要素として削除する方法またはサブロップ可能なエリアを作る方法は?  ( How to drop inside an element as a sub element or how to make a sub droppable a ) 
ドラッグ可能なコンポーネントは、次のコードで<コード> Drop 関数の内側にあります。これは、それらを並べ替えるために要素をドラッグアンドドロップできることを意味しますが、他のElMeentsの内側になるように選択したい場合はどうなります。例えば、 後方牽引...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有