Perform actions with drag and drop

[NicoAMP]

Hello,

I created a custom side view in OWA with buttons to perform specific actions (insert XML fragment) on click. It works well.

I would like also to perform these actions when I drag and drop these buttons on document.
So I add a listener on my buttons:

Code: Select all

button.addEventListener( "dragstart" , function(e){drag(e,name);}); 

And after I tried to execute operation on drop event:

Code: Select all

//drag event
function drag(ev,name) {
  ev.dataTransfer.setData("text", name);
}

//drop event
function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  
  editor.getActionsManager().invokeOperation(
    'ro.sync.ecss.extensions.commons.operations.ExecuteMultipleActionsOperation',
    { actionIDs: 'insert_' + data },
    function () {
      console.log('Done!');
    }
  );  
}

//add drop event on body
document.getElementsByTagName("body")[0].addEventListener( "drop" , function(e){drop(e);});

But nothing appends
Maybe the drop event is not defined at the right place?

Thanks for your help.

Regards,
Nicolas

[mihaela]

Hi,

Can you please tell us more details about what you are trying to obtain when the buttons are dropped in the editor? If you only want to insert images, urls or simple text (that you know from the dragstart event), you can use our resource ResourceDragHandler API [1][2].

To answer your question: the code that adds the drop event listener to the body element should be executed after the editor is loaded.
Also, you should set the useCapture parameter of addEventListener to true.
You have to take care to overwrite the default drop handling only for that cases when your button elements are dropped.

Code: Select all

goog.events.listen(workspace, sync.api.Workspace.EventType.EDITOR_LOADED, function(e) {
  function drop(ev) {
    // ...
  }
  document.getElementsByTagName("body")[0].addEventListener("drop" , drop, true);
});

[1] https://www.oxygenxml.com/maven/com/oxy ... pe__anchor
[2] https://www.oxygenxml.com/maven/com/oxy ... er__anchor

[NicoAMP]

Hi Mihaela,

Thanks for your answer, it was very helful.

My goal is to have some buttons in a side view.
When I click on a button, I want to insert an XML fragment. So I create an action in my framework (InsertFragmentOperation) and I call this action using ro.sync.ecss.extensions.commons.operations.ExecuteMultipleActionsOperation.
I would like also to perform these actions when I drag and drop a button on the document, instead of click on it.

Now with this code I can perform action when I drop one of my button.

Code: Select all

button.addEventListener("dragstart", function (e) { drag(e, 'fragment_' + name); });

Code: Select all

//drag event
function drag(ev, name) {
  ev.dataTransfer.setData("text", name);
}

goog.events.listen(workspace, sync.api.Workspace.EventType.EDITOR_LOADED, function (e) {
  var editor = e.editor;

  //drop event
  function drop(ev) {
    var data = ev.dataTransfer.getData("text");
    if (data.lastIndexOf('fragment_', 0) === 0) {
      ev.preventDefault();
      editor.getActionsManager().invokeOperation(
        'ro.sync.ecss.extensions.commons.operations.ExecuteMultipleActionsOperation',
        { actionIDs: data },
        function () {
          console.log('Done!');
        }
      );
    }
  }

  document.getElementsByTagName("body")[0].addEventListener("drop", function (e) { drop(e); }, true);
});

But I still have a problem: XML fragment are not inserted where I drop. They are inserted where the caret is.

Is there a solution in javascript to move caret where I drop?

Thanks

[mihaela]

Hi,

When your drop method is called, the caret position on the server is still on drag start so you will have to use setTimeout:

Code: Select all

 setTimeout(() => {
 	editor.getActionsManager().invokeOperation(...);
     }, 0);

A small suggestion regarding the detection of the information set on drag start: you could also add your view id to better identify your data.

Best Regards,
Mihaela

[NicoAMP]

Hi Mihaela,

Perfect! It works well

Thanks a lot for your help.

Regards,
Nicolas