css - 如何在 css 中添加可拖动的输入？

Question

所以本质上，我是一个非常初学者的网页设计师。我才刚刚开始。我的问题是，如何做到这一点，以便有一个可以拖动某些东西的字段？例如，您如何使某个字段响应被拖入其中的某些内容？我的情况是我正在制作一个带有照片的网站。我想做这样一个人可以将照片拖到他们的“画廊”中，然后他们就可以下载它。

提前致谢。

Answer 1

您要的基本上是类型的输入file

<div style={{ borderRadius: '5px', height: '220px', textAlign: 'center', border: '1px solid #E4E7EE', backgroundColor: '#FFFFFF', display: 'flex', flexDirection: 'column', textAlign: 'center' }} >
  <div style={{ margin: 20, borderRadius: '5px', height: '100%', textAlign: 'center', border: '1px solid #E4E7EE', backgroundColor: '#FFFFFF', display: 'flex', flexDirection: 'column', textAlign: 'center', borderStyle: 'dashed' }}>
    <input
       style={{
         position: 'relative', opacity: '0', textAlign: 'center', zIndex: '1', height: '100%',
       }}
       type="file"
       accept="image/*"
       onChange={this.uploadImageFile}
    />
  <div style={{ color: '#4B5D71', fontSize: '14', margin: '20% 15%', position: 'absolute', textAlign: 'center' }}>
     Drag or browse the watermark file to upload.
  </div>

这将创建一个隐藏在矩形区域内的文件类型的输入，您可以在其中单击并打开文件管理器或在其中拖放。