javascript - Dragula.js：如何允许用户仅从侧边栏中拖动图像

Question

我第一次使用dragula.js ，并使用dragula.js 开发了一个非常基本的页面构建器。

我创建了一个侧边栏并添加了一些基本块和使用的块图像。现在我想允许用户从侧边栏中拖动唯一的图像元素，而不是其他 HTML 元素。

这是我从侧边栏看到的 HTML：

<div id="drag-area" class="container">
<div class="pb-10 do-not-drag">Drag and drop blocks to the page</div>
<div class="pb-10">
    <strong class="do-not-drag">Headers</strong>
    <div class="container mx-auto grid sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols24 pt-3 gap-8">
        <div class="cursor-pointer core-block">
            <img src="http://127.0.0.1:8000/images/block-1.png" id="a8873587-dadd-4b60-9657-2afab2a3e07d" alt="Header" />
        </div>
    </div>
</div>
<div class="pb-10">
    <strong class="do-not-drag">Guest Sections</strong>
    <div class="container mx-auto grid sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols24 pt-3 gap-8">
        <div class="cursor-pointer core-block">
            <img src="http://127.0.0.1:8000/images/block-2.svg" id="2d553f1f-fc76-4bd5-ad1d-49a3dbc84a28" alt="eBook Of Condolence" />
        </div>
    </div>
</div>
<div class="pb-10">
    <strong class="do-not-drag">Remembrance Service and Events</strong>
    <div class="container mx-auto grid sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols24 pt-3 gap-8">
        <div class="cursor-pointer core-block">
            <img src="http://127.0.0.1:8000/images/block-3.png" id="1ce8ba81-8c83-4415-b31c-cc2ba3834cba" alt="Remembrance Service" />
        </div>
        <div class="cursor-pointer core-block">
            <img src="http://127.0.0.1:8000/images/block-4.png" id="1fe181ca-5da7-4268-9f7c-b560632d8f4c" alt="Event" />
        </div>
    </div>
</div>
<div class="pb-10">
    <strong class="do-not-drag">Charitable Donations and/or Collections</strong>
    <div class="container mx-auto grid sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols24 pt-3 gap-8">
        <div class="cursor-pointer core-block">
            <img src="http://127.0.0.1:8000/images/block-5.png" id="a1bc8326-8ab4-4686-b022-89fcf0c0bcf8" alt="Charity Fundraising" />
        </div>
    </div>
</div>
<div class="pb-10">
    <strong class="do-not-drag">Contact</strong>
    <div class="container mx-auto grid sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols24 pt-3 gap-8">
        <div class="cursor-pointer core-block">
            <img src="http://127.0.0.1:8000/images/block-3.png" id="0994ec78-8d3d-44b8-abad-1eef97dbb426" alt="Contact 1" />
        </div>
        <div class="cursor-pointer core-block">
            <img src="http://127.0.0.1:8000/images/block-4.png" id="20470234-1616-4b14-8a3b-f068d4f98e92" alt="Contact 2" />
        </div>
    </div>
</div>
<div class="pb-10">
    <strong class="do-not-drag">Gallery</strong>
    <div class="container mx-auto grid sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols24 pt-3 gap-8">
        <div class="cursor-pointer core-block">
            <img src="http://127.0.0.1:8000/images/block-5.png" id="d13c79b8-cf23-4db5-a7eb-ed551d4ba71c" alt="Gallery 1" />
        </div>
        <div class="cursor-pointer core-block">
            <img src="http://127.0.0.1:8000/images/block-3.png" id="0bdef350-f8d0-4d6f-bbba-62e9eaa73ad0" alt="Gallery 2" />
        </div>
        <div class="cursor-pointer core-block">
            <img src="http://127.0.0.1:8000/images/block-4.png" id="d0a47536-4451-42da-86e4-1ab9e53fc095" alt="Gallery 3" />
        </div>
    </div>
</div>
<div class="pb-10">
    <strong class="do-not-drag">Testimonial</strong>
    <div class="container mx-auto grid sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols24 pt-3 gap-8">
        <div class="cursor-pointer core-block">
            <img src="http://127.0.0.1:8000/images/block-3.png" id="8e4f6996-0210-4688-a96d-1a186cef6246" alt="Testimonial 1" />
        </div>
        <div class="cursor-pointer core-block">
            <img src="http://127.0.0.1:8000/images/block-4.png" id="151aa6a0-6c3d-4a3b-b8ef-9afc49031e4a" alt="Testimonial 2" />
        </div>
        <div class="cursor-pointer core-block">
            <img src="http://127.0.0.1:8000/images/block-5.png" id="ad055828-7104-4980-8eaf-20842609cb4c" alt="Testimonial 3" />
        </div>
    </div>
</div>

HTML预览

只有用贪婪边框突出显示的图像才能被拖动。请有人指导我，因为我不擅长 js 并且无法找到解决方案。

标签： javascripthtmldrag-and-dropdraggabledragula