Hi Telerik team! I'm trying to use drag and drop with a diagram. All works fine but I can't understand how I can choose a particular node, instead of another, as target of a drop target. I mean, if the shapes (nodes) aren't traditional DOM elements but they're graphic elements (svg), I can't assign an id or a css class to those shapes.
For now I'm using as filter element in drop target area, a <g> element of the DOM, but for my business logic, I have to allow to drop an element if and only if the target isn't a leaf.
I have checked inside the function that handle the event on drop and I have only the <g> DOM element (as Javascript or jQuery object), but I am not able to recognize if it's the root, a child or a leaf or whatever.
Any suggestions?
I'm using Angular, here some code:
<
div
kendo-droptargetarea
k-filter
=
"'g'"
k-drop
=
"ctrl.add"
k-dragenter
=
"ctrl.onDragEnter"
k-dragleave
=
"ctrl.onDragLeave"
class
=
"k-content col-lg-10 col-sm-11"
id
=
"sourceEditorCanvas"
ng-cloak
=
""
>
<
div
kendo-diagram
k-options
=
"ctrl.diagramOpts"
style
=
"margin-left:20px;height:81vh;"
id
=
"sourceDiagram"
>
</
div
>
</
div
>
this is my HTML with kendo-angular directives, note k-filter="'g'" and k-drop="ctrl.add", the next code snippet instead is the function that handle the drop event:
add:
function
(e) {
var
draggableElement = {},
dataItem = {},
ctrl =
this
.$angular_scope.ctrl;
draggableElement = e.draggable.currentTarget;
dataItem = draggableElement.data().$scope.dataItem;
if
($.isEmptyObject(dataItem))
return
;
var
shape = {
name: dataItem.name,
type: dataItem.type,
color: colorsUI[
"teal"
]
};
ctrl.currentSource[0].items.push(shape);
$(
'#sourceDiagram'
).data(
'kendoDiagram'
).dataSource.data(ctrl.currentSource);
ctrl.onDragLeave($(
'#sourceEditorCanvas'
));
},