Drag 'n Drop from external ul

[CatalinRadoi]

Hi! I have created an ul like this:

<ul class="collection unallocatedUsers">
  <li class="collection-item" id="44c1d386-83d2-4ebf-aa57-1856d65fc5b0" draggable="true" ondragstart="drag(event)">Alvin Catalin</li>
  <li class="collection-item" id="26ef17a7-4126-419a-b057-1d92b89378c5" draggable="true" ondragstart="drag(event)">Alvin Alțuică</li>
  <li class="collection-item" id="251e36bc-b0ad-489f-a201-c58f020b6b52" draggable="true" ondragstart="drag(event)">Alvin Cutărel</li>
  <li class="collection-item" id="498f64d7-b453-4e0d-912d-53bda9a8c076" draggable="true" ondragstart="drag(event)">Alvin</li>
</ul>

that's what I have in JS: function drag(event) { console.log(event.target.id); console.log(event.target.innerHTML);

I would like to be able to drag an li from this list to the grid and get the id and innerHTML into the node.

I have no idea on how to accomplish that. And also, my grid has "draggable": true, because I also want to drag nodes in the org chart.

Any help will be greatly appreciated, thanks!

[richardwalker-iamtech]

https://github.com/dabeng/OrgChart/pull/398 might help you.

I created an application with a 'toolbox' at one side from which you could drag items (ul tags) into the chart. They would be inserted within the node you dragged to. Works on touch devices too.

[richardwalker-iamtech]

Looks like @dabeng has committed my PR, so you should be able to do this now.

I was a little bit lazy in that I did not update any of the documentation or provide a JSFiddle example, but there is a new event you can attach to and pick up the 'drop' request from your code above into orgchart.

[gmatta01]

@richardwalker-iamtech A fiddle would be highly appreciated.

[acidnine]

@richardwalker-iamtech A fiddle would be highly appreciated.

This was really bugging me, so I looked into commit 76797d5 which helped me figure out how to do this. My method could be wrong but it's working... Fiddle here: https://jsfiddle.net/acid9nine/wm81xtz0/

[richardwalker-iamtech]

Sorry, this escaped my mind, and it has been ages since I used the code, so I am starting to forget the details!

@acidnine If you method works, then great! I think that the nodedrop.orgchart event was used to note the updates to the base data (from existing orgchart.js drag-and-drop) and keep my model up-to-date.

To aid for picking up drag-and-drops from other places (like your list), I added the event otherdropped.orgchart to orgchart.

I had something like:

$chart.on('otherdropped.orgchart', function (event) { var draggedData = event.draggedItem.attr('drag-me-data'); var droppedOnNodeId = event.dropZone.attr('id'); // todo: do something with the data, such as update your data model // need to maek sure draggedData and droppedOnNodeId are valid etc. }

[acidnine]

Wow, thanks @richardwalker-iamtech I appreciate the explanation and like your method more, simplifies things further so elements don't have to have a faking node class/return false on drop. https://jsfiddle.net/b2e6cyn8/

Since examples of external drag/drop functionality have been given this can probably now be closed @CatalinRadoi ?