时间戳

首页 > 解决方案 > 在反应中保存反应可拖动对象的位置

reactjs - 在反应中保存反应可拖动对象的位置

问题描述

我正在使用 react-draggable 拖放元素。拖动后如何保存元素位置。

<div className={classes.section}>
       <h5>Create Invoice</h5>

      {isEditing ? <Button variant="contained" color="primary">Edit</Button> : <Button variant="contained" color="primary">Update</Button>} </label>
        <div id="target" onDrop={this.drop} onDragOver={this.allowDrop}>
       <Paper className={classes.paper}  >

       <form>

         <Draggable axis="both" bounds="div" disabled={isEditing}>
         <CustomInput select variant="outlined"  label="To" helperText="Please select your company"/></Draggable>
         <Draggable axis="both" bounds="div" disabled={isEditing}><CustomInput name="invoicenumber" label="Invoice Number"/></Draggable>
         <Draggable axis="both" bounds="div" disabled={isEditing}><CustomInput id="Date" label="Issue Date" defaultValue="2019-01-01" type="Date" variant="outlined" InputLabelProps={{shrink:true}}/></Draggable>
         <TextField id="Date" defaultValue="2019-01-01" type="Date" variant="outlined" InputLabelProps={{shrink:true}}/>
         <h5>Item Id</h5> */}
         <Draggable axis="both"  bounds='div' disabled={isEditing}><CustomInput type="textarea" variant="outlined" label="Description"/></Draggable>
         <Draggable axis="both" bounds='Div' disabled={isEditing}>
         <CustomInput type="file" variant="outlined" helperText="Attachments" style={{alignContent:"right"}}/>
         </Draggable>


         </form>

       </Paper>
       </div>

标签： reactjs

解决方案

这是获取值的函数。获得值后，您将根据需要将其设置为数据库或 localStorage。

 const eventLogger = (e, data) => {
    localStorage.setItem('defaultPosition', { valueX: data.x, valueY: data.y });
  };

该函数将在 Dragable 中由 onStop 事件调用。

  <Draggable defaultPosition={{ x: 0, y: 0 }} onStop={eventLogger}>
    <h2 style={{ cursor: 'grab' }}>
      dragable
    </h2>
  </Draggable>

推荐阅读