14

JavaScript Calendar: Custom Drop Target for External Items | DayPilot Code

 3 years ago
source link: https://code.daypilot.org/90296/javascript-calendar-custom-drop-target-for-external-items
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Overview

  • Use the DayPilot.Calendar.registerDropTarget() method to create a custom drop target.

  • This method lets you extend the drag and drop functionality for the external items.

  • The native HTML5 drag and drop API and DayPilot.Calendar.makeDraggable() can’t be used at the same time.

  • Includes a trial version of DayPilot Pro for JavaScript (see License below)

License

Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript. Buy a license.

How to make external items draggable to the Calendar component

The JavaScript Calendar component supports external drag and drop. It lets you drag custom items to the calendar where they will be converted to events.

You can use DayPilot.Calendar.makeDraggable() method to mark items as draggable. The method accepts an object that has to define the following properties:

  • element (this is the source element that will be made draggable)

  • data (item data that will be used to create the event; it has to specify id, text, and duration properties)

This example activates children of the #queue element marked with .queue-item CSS class:

<div id="queue">
  <div data-id="1" class="queue-item">Item 1</div>
  <div data-id="2" class="queue-item">Item 2</div>
  <div data-id="3" class="queue-item">Item 3</div>
</div>

JavaScript

const app = {
  elements: {
    queue: document.querySelector("#queue"),
    // ...
  },
  activateExternalItems() {
    const items = this.elements.queue.querySelectorAll(".queue-item");
    for (let i = 0; i < items.length; i++) {
      const e = items[i];
      const duration = DayPilot.Duration.ofMinutes(e.getAttribute("data-duration") || 60);

      const item = {
        element: e,
        data: {
          id: e.getAttribute("data-id"),
          text: e.innerText,
          duration: duration,
        }
      };
      DayPilot.Calendar.makeDraggable(item);
    }
  },
  // ...
};

How to activate a custom drop target

You can use the DayPilot.Calendar.registerDropTarget() method to activate an element as a drop target. This will let you drag the external items to this element.

The method lets you define events handlers:

  • onDrop: fired when the item is dropped on the target element

  • onDragOver: fired continuously when the the is being dragged over the target element

  • onDragLeave: fired when the item is moved outside of the target element

The drop target respects the keepElement option of the external item. By default, the source element will be removed from DOM on drop.

The following example activates the #drop element. The #drop element will be highlighted using "active" CSS class when an external item is being dragged over the element.

On drop, the external item text will be added to the #drop element.

<div id="drop"></div>

JavaScript

const app = {
  elements: {
    // ...
    drop: document.querySelector("#drop")
  },
  activateDropTarget() {
    const drop = this.elements.drop;
    DayPilot.Calendar.registerDropTarget({
      element: drop,
      onDrop: args => {
        drop.innerText += " " + args.data.text;
        drop.classList.remove("active");
      },
      onDragOver: args => {
        drop.classList.add("active");
      },
      onDragLeave: args => {
        drop.classList.remove("active");
      }
    });
  }
  // ...
};

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK