Drag'n'Drop duplicating elements

9 posts, 4 answers
  1. Mario
    Mario avatar
    8 posts
    Member since:
    Jun 2015

    Posted 23 Jun 2015 Link to this post

    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 ?

  2. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 25 Jun 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Mario
    Mario avatar
    8 posts
    Member since:
    Jun 2015

    Posted 25 Jun 2015 in reply to T. Tsonev Link to this post

    Hi T. Tsonev,

    thank you for your answer!!

    Sure, it helps.

    Can you guide me with that in attach ?

     

  5. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 29 Jun 2015 Link to this post

    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!
     
  6. Mario
    Mario avatar
    8 posts
    Member since:
    Jun 2015

    Posted 29 Jun 2015 in reply to T. Tsonev Link to this post

    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 !

  7. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 01 Jul 2015 Link to this post

    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!
     
  8. Mario
    Mario avatar
    8 posts
    Member since:
    Jun 2015

    Posted 03 Jul 2015 in reply to T. Tsonev Link to this post

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

  9. Mario
    Mario avatar
    8 posts
    Member since:
    Jun 2015

    Posted 03 Jul 2015 in reply to Mario Link to this post

    I did it*
  10. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 06 Jul 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready