[ANGULAR] Drag and Drop external container not give proper dropped date

[abhi]

I have created external container which are drag-able. But when dropped on any date i should be able to edit that item. I m able to detect the dragged and dropped container but date detected is wrong. Below is code i have used to detect date for cordinates.

scheduler = new Scheduler();

dragHelper.on({
      dragstart: this.onDragStart.bind(this),
      drop: this.onDragDrop.bind(this)
    })

onDragStart({context}: any) {}

onDragDrop({context, source}: any) {
    let cord = DomHelper.getTranslateX(context.element);
    let dateTime = this.scheduler.getDateFromCoordinate(cord, 'round', false);
    console.log("dateTime", dateTime);
    if (context.grabbed) {
      // Trigger edit
    }
  }

[mats]

Can you please upload a full runnable test case? And ideally a short video showing what you expect vs what date value you get.

[abhi]

In above GIF you can observe that from left sidebar. Dragged container are drop on Feb month dates but it is considering as March dates. I have used below code to identify date from context grabbed.

onDragDrop({context, source}: any) {
    let cord = DomHelper.getTranslateX(context.element);
    let dateTime = this.scheduler.getDateFromCoordinate(cord, 'round', false);
    console.log("dateTime", dateTime);
    if (context.grabbed) {
      // Trigger edit
    }
  }

[Animal]

That’s not actually dragging.

You need to configure on the externalEventSource feature, and ensure you tell it how to create the potential event from the dragged element,

[Animal]

https://bryntum.com/docs/calendar/#Calendar/feature/ExternalEventSource

[abhi]

I have tried externalEventSource, it is not converting itemsSelector into draggable. Later started using dragHelper.

// dragging element within container
    let dragHelper = new DragHelper({
      cloneTarget : true,
      mode    : 'translateXY',
      // Only allow drops on scheduled tasks
      dropTargetSelector : '.b-calendar-cell',
      // Only allow dragging cell elements inside on the equipment grid
      targetSelector     : '.schedule-list .list-row'
    });

By above code(dragHelper), i m able to trigger custom editEvent. But getting wrong date when trying to get from getDateFromCoordinate

[mats]

Trying to piece together the bits of info here. Your screenshot shows Calendar, yet your code bits show:

scheduler = new Scheduler();

this.scheduler.getDateFromCoordinate(cord, 'round', false);

We need some clarification of what components you are using, a runnable test case would be ideal

[abhi]

Sorry for the confusion. I was trying out an example code where there were using scheduler to get datetime.

I m using only calendar component and dragHelper to get grabbed selectorId.
Will create runnable test project and share with guys.

[Animal]

So you are in fact using Calendar?

In that case, do not write any code like that at all.

It's much easier than that.

Just use the externalEventSource feature.

features : {
    externalEventSource : {
        // The id of the element to drag from.
        dragRootElement : 'event-source',

        // Identify draggable elements
        dragItemSelector : '.some-selector',

        // Create an event when a drag is started on one of the elements
        getRecordFromElement(element) {
            // Return an object from which an EventModel can be created.
            // Same format as loading an EventStore. { name : 'name', startDate: ''} etc
            return { name : whatever }
        }
    }
}

You just have to create an object which is the basis for a new event. Minimally it can just contain the name. After that, it all Just Works.

[abhi]

Thanks @Animal & @mats for responding. But externalEventSource feature was not satisfying my requirement. But found alternate solution using DragHelper itself. Just posting the solution if some one else also have similar needs.

// dragging element within container
    let dragHelper = new DragHelper({
      cloneTarget : true,
      mode    : 'translateXY',
      // Only allow drops on scheduled tasks
      dropTargetSelector : '.b-calendar-cell',
      // Only allow dragging cell elements inside on the equipment grid
      targetSelector     : '.schedule-list .list-row'
    });
    

dragHelper.on({
  drop: this.onDragDrop.bind(this)
})

onDragDrop({ context, event}: any) {
// @ts-ignore
let dateTime = this.calendar.getDateFromDomEvent(event);
   
if (context.grabbed) {
  let newDate = moment(dateTime).format("YYYY-MM-DD");
  let newHour = moment(dateTime).format("hh:mm");

  // Trigger custom model
}
context.finalize(true);
  }