This is a migrated thread and some comments may be shown as answers.

Drag'n'Drop duplicating elements

8 Answers 104 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Mario
Top achievements
Rank 1
Mario asked on 23 Jun 2015, 02:20 PM

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 ?

8 Answers, 1 is accepted

Sort by
0
Accepted
T. Tsonev
Telerik team
answered on 25 Jun 2015, 04:08 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mario
Top achievements
Rank 1
answered on 25 Jun 2015, 04:46 PM

Hi T. Tsonev,

thank you for your answer!!

Sure, it helps.

Can you guide me with that in attach ?

 

0
Accepted
T. Tsonev
Telerik team
answered on 29 Jun 2015, 12:33 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mario
Top achievements
Rank 1
answered on 29 Jun 2015, 02:40 PM

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 !

0
Accepted
T. Tsonev
Telerik team
answered on 01 Jul 2015, 03:41 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mario
Top achievements
Rank 1
answered on 03 Jul 2015, 01:44 PM

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]
                    });
                }
            });
        }
    }
});

0
Mario
Top achievements
Rank 1
answered on 03 Jul 2015, 01:45 PM
I did it*
0
Accepted
T. Tsonev
Telerik team
answered on 06 Jul 2015, 11:37 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Diagram
Asked by
Mario
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Mario
Top achievements
Rank 1
Share this question
or