模式 · 来自图片排序

拖放区与拖入遮罩

空的时候是一块虚线区：把东西拖进来、或选择文件、或粘贴；有内容之后，拖到面板任何地方都会出现「松手，放进来」。

演示

把图片拖到这里

也可以，或直接粘贴链接 ⌘V

<div id="drop-demo" style="position:relative;padding:16px;border:1px solid var(--line);background:var(--bg);min-height:220px">
  <div class="xxd-dropzone" id="drop-zone">
    <i data-xxd-icon="ImagePlus" data-size="24"></i>
    <p class="xxd-dropzone__title">把图片拖到这里</p>
    <p class="xxd-help">也可以 <button class="xxd-link" type="button">选择图片文件</button>，或直接粘贴链接 ⌘V</p>
  </div>
  <p class="xxd-help" id="drop-out" style="margin-top:12px"></p>
</div>
<script>
  Xxd.bindDrop(document.getElementById("drop-demo"), {
    zone: document.getElementById("drop-zone"),
    onFiles: (files) => (document.getElementById("drop-out").textContent = `收到 ${files.length} 个文件`),
    onText: (text) => (document.getElementById("drop-out").textContent = `收到文字：${text.slice(0, 40)}`),
  });
</script>

结构

虚线区：图标 · 一句话 · 其他方式（选择文件 / 粘贴）
遮罩：盖住整个面板，一句话，拖出去就消失

规则

每种进来的方式在点之前就说清会带来什么
粘贴在输入框里时不接管

JS

const off = Xxd.bindDrop(panel, { zone, onFiles(files) {…}, onText(text) {…}, veil: "松手，加到这一组" })