Drag'n'Drop duplicating elements

[Mario]

Hi, 

I have a kendo-panelBar with this:

<kendo:panelBar-items>
    <span class="shapeItem" data-role="draggable"
        id="atv"> <kendo:panelBar-item text="Atividade"
            imageUrl="${ atv }" />
    </span>
</kendo:panelBar-items>

and down there, more with this:

$("#shapesPanelBar .shapeItem").kendoDraggable({

            hint : function() {

                return createElement();

            }

        });

 

        $("#diagram").kendoDropTarget({

            drop : function(e) {

                var item, pos, transformed;

                if (e.draggable.hint) {

                    item = e.draggable.hint.data("shape");

                    pos = e.draggable.hintOffset;

                    pos = new Point(pos.left, pos.top);

                    var transformed = diagram.documentToModel(pos);

                    item.x = transformed.x;

                    item.y = transformed.y;

 

                    diagram.addShape(item);

                }

            }

        });

function createElement() {
        var dataviz = kendo.dataviz;
        var g = new dataviz.diagram.Group();

        g.append(new dataviz.diagram.Image(
                        {
                            source : 'data:image/svg+xml;base64,[...]',
                            width : 90,
                            height : 120
                        }));

        return g;
    }

 

But when i drag nothing happens and this error occurs on console browser:

Uncaught TypeError: Cannot read property 'ownerDocument' of undefined
jquery.min.js:5

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

 

So, how i make a panel bar with elements and drag they to KendoDiagram ?

[T. Tsonev]

Hi,

The hint function currently returns a Diagram shape. The Draggable tries to append it to the DOM, but fails as this is not possible.
Try returning a copy of the list item itself:
  hint: function() {
    return this.element.clone();
  }

 

I hope this helps.

Regards,
T. Tsonev
Telerik

 

 

[Mario]

Hi T. Tsonev,

thank you for your answer!!

Sure, it helps.

Can you guide me with that in attach ?

 

[T. Tsonev]

Hello,

If I understand correctly, the createElement method is part of the implementation of the drop hint.
As such, there's no need to create diagram shapes just yet. All it should care about is the visual cue (hint) for the dragged shape.
Therefore the default implementation should suffice:
 hint: function() {
    return this.element.clone();
  }

Creating the image should be a concern for the drop handler. There you can access the original data attributes as:
  drop: function(e) {
    var item, pos, transformed;
    if (e.draggable.hint) {
      item = e.draggable.hint.data("shape");
      ...

Here e.draggable.hint is the element you cloned from above.

I hope this makes sense.

Regards,
T. Tsonev
Telerik

 

 

[Mario]

Hi T. Tsonev, thank you for your answer!

I solved how to get the id from e.draggable.hint element.

And yes, that make sense but how i supposed to pick up id from var options (line 223 on attached image) ?

 Sorry for that kind of questions, i do not found any doc of that elements.

 And when i pass through createElement method the id (line 206 on attached image)​,

the dataSvg var do not works, but the value that getDataSVGFromId method return it is correct !

[T. Tsonev]

Hi,

The problems you're experiencing come from the fact that the createElement function is not receiving options as parameter.
In fact, it is currently receiving the id.

Therefore you should be able to write:
  createElement(id) {
    ...
  }

I hope this helps.

Regards,
T. Tsonev
Telerik

 

 

[Mario]

Hi T. Tsonev,

 Thank you for your answer!

 I do it that way

 

$("#diagram").kendoDropTarget({
    filter : "#diagram",
    drop : function(e) {
        var item, pos, transformed;
        if (e.draggable.hint) {
            item = e.draggable.hint.data("shape");
            pos = e.draggable.hintOffset;
            pos = new Point(pos.left, pos.top);
            var transformed = diagram.documentToModel(pos);

            var hintId = e.draggable.hint.attr("id");
            var b64 = getDataSVGFromId(hintId);

            //
            diagram.addShape({
                x : transformed.x,
                y : transformed.y,
                visual : function() {
                    return new kendo.dataviz.diagram.Image({
                        source : b64[1],
                        width : b64[2],
                        height : b64[3]
                    });
                }
            });
        }
    }
});

[Mario]

I did it*

[T. Tsonev]

Hi,

Great, I'm glad to see you've got this working. It makes sense to keep all the handling in the drop handler. The code is much more clear now.

Regards,
T. Tsonev
Telerik