Perform actions with drag and drop

Having trouble deploying Oxygen XML Web Author? Got a bug to report? Post it all here.
NicoAMP
Posts: 64
Joined: Tue Mar 06, 2018 2:07 pm
Contact:

Perform actions with drag and drop

Post by 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
Posts: 275
Joined: Wed May 20, 2009 2:40 pm

Re: Perform actions with drag and drop

Post by 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
Mihaela Calotescu
http://www.oxygenxml.com
NicoAMP
Posts: 64
Joined: Tue Mar 06, 2018 2:07 pm
Contact:

Re: Perform actions with drag and drop

Post by 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
Posts: 275
Joined: Wed May 20, 2009 2:40 pm

Re: Perform actions with drag and drop

Post by 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
Mihaela Calotescu
http://www.oxygenxml.com
NicoAMP
Posts: 64
Joined: Tue Mar 06, 2018 2:07 pm
Contact:

Re: Perform actions with drag and drop

Post by NicoAMP »

Hi Mihaela,

Perfect! It works well :D

Thanks a lot for your help.

Regards,
Nicolas
Post Reply