时间戳

首页 > 解决方案 > 如何使 Filepond 图像可拖动？

javascript - 如何使 Filepond 图像可拖动？

问题描述

我将使 FilePond 图像在预览区域内可拖动，图像位置可以相互更改，一些可以帮助您如何做到这一点？

检查截图 https://imgur.com/a/BZGlemx

<div id="main">
  <div id="header">
    <h1>Drag and drop fileupload</h1>
  </div>
  <div id="content">
    <form class="dropzone" id="fileupload"></form>
  </div>

</div>

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $(function() {
    $(".dz-image").draggable();
  });
</script>
<script src="./dropzone.js"></script>
<script type="text/javascript">
  Dropzone.autoDiscover = false;
  $("#fileupload").dropzone({
    url: "upload"
  });
</script>

标签： javascriptjqueryjquery-ui-draggablefilepond

解决方案

删除自定义脚本并将其设置allowReorder为true.

FilePond.create({
  allowReorder: true
})

推荐阅读