Angular 2 - Drag and Drop Functions

Question

Plunker: https://plnkr.co/edit/uZ8mvu6a1LXAsBBY3Shd?p=preview

At the top, I have "widgets:" Text a and "Text b" that you can drag and drop.

Below the widget, you get two rows with widgets already inside. I have

• Block containers
  • Block string (blue background)
    • Block column (pink background)
      • Block (red background)

basically like a Bootstrap grid.

1) When I drag the widget’s text over the red block, the widget is added, but I don’t get the callback function called onDragEnter . I only get in console.log onDropSucces .

I would like to receive a callback when I drag the widget over the container, row, column and block to add logic.

I tried to add my functions, but it does not work and I can not understand where the error is.

Hope some can help with this.

  //Drag functions

        drop(item){
            alert('dropped')
            console.log('dropping event', item)
                var target = item.mouseEvent.target,
                  index;

                if(target.classList.contains('row')) {
                    index = target.getAttribute('data-index');
                }

                if(target.classList.contains('item') && target.parentNode.classList.contains('row')) {
                    index = target.parentNode.getAttribute('data-index');
                }

                if(index) {
                    console.log(this.containers);
                    console.log(this.containers[index]);
                    this.containers[index].widgets.push( item.dragData);
                } else {
                    this.containers.push([ item.dragData]);
                }
         }
         onDropSuccess(widget: any, event: any, objecType: string) {
            console.log('dropped on ', objecType)
            if( objecType == 'row'){
                console.log('dropped on', objecType)
            }
            else if(objecType == 'block'){
                console.log('dropped on ', objecType)
            }
            this.dragOperation = false;
            console.log('onDropSuccess x', widget, event);

            console.log('containers', this.containers)
         }

         onDragStart(widget: any, event: any) {
            console.log('onDragStart', widget, event);
         }

         onDragEnter(widget: any, event: any) {
            alert('entered ')
            console.log('onDragEnter', widget, event);
            console.log('drag enter containers', this.containers)
         }

           chicken(event) {
            console.log('onDragEnter chicken', event);

         }

         onDragSuccess(widget: any, event: any) {
            console.log('onDragSuccess', widget, event);
         }

         onDragOver(widget: any, event: any) {
            console.log('onDragOver', widget, event);
         }

         onDragEnd(widget: any, event: any) {
            console.log('onDragOver', widget, event);
         }
         onDragLeave(widget: any, event: any) {
            console.log('onDragLeave', widget, event);
         }

         onMouseDown(){
            this.dragOperation = true;
            console.log('mouse down');
         }

         onMouseUp(event: any){
            console.log(event);
            this.dragOperation = false;
         }

Answer 1

What you need to do is add two things to your elements in your html.

The first is

(dragover)="$event.preventDefault()"

What he will do is that he allows you to get into this element that you are already processing elsewhere, but by doing this here, you can register for the next callback.

The next thing you need to add is

(dragenter)="onDragEnter('',$event)"

This will actually call the onDragEnter function and associate the event with it. You can, of course, change the settings according to what you need.

, 38, , .

. onDragEnter (, ), .

https://www.w3schools.com/html/html5_draganddrop.asp, , .

, , , .

Answer 2

onDragEnter dragEnter plunkr [ Plunkr] [1]

 [1]: https://plnkr.co/edit/88aBdI1WOeJ7MvEvnAKm?p=preview

Answer 3

, angular 2. . 2 , , ng2-dragula ng2-dnd. ng2-dnd ng-dragula .