3 different drag elements for 1 drop field?

Using JavaScript with Hype
2

With JavaScript anything is possible :slight_smile:

As drop targets aren't a built-in feature of Hype, are you currently using any specific drop code?

This is post probably has the most canonical way and easiest setup:

The general flow is:

  1. Add the HypeDragAndDropEnabler.js file to your project, and turn off the "Include in document <head>" checkbox
  2. Add these script tags to your head html via the document inspector:
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
<script src="https://cdn.jsdelivr.net/gh/worldoptimizer/HypeMutationObserver@1.1/HypeMutationObserver.min.js"></script>
<script type="text/javascript" src="${resourcesFolderName}/HypeDragAndDropEnabler.js? toEnsureLoidingLatestBuilt"></script>
  3. Add a Class Name to the drop element (in the Identity Inspector)
  4. Add at least these two Additional HTML Attributes to the drag elements (also in the Identity Inspector):
    • data-drag as true
    • data-drop as the class name specified in step 3

In this flow, it is the drag element that specifies where it can be dropped, so it is possible for a single target to take multiple elements.

SimpleDragAndDrop.hype.zip (23.3 KB)

There's more configurability and options that are shown in the original post about it.

3 Likes