Как добавить перетаскиваемый ввод в 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>

Это создаст ввод файла типа, который скрыт внутри прямоугольной области angular , где вы можете нажать и открыть файловый менеджер или перетащить в него.