Prevent Draggable snap back

7 posts, 0 answers
  1. Marlon
    Marlon avatar
    16 posts
    Member since:
    Jul 2013

    Posted 06 Nov 2013 Link to this post

    I want to create a sticky notes-type widget where a user can drag a div around the screen. I thought kendoDraggable could do that. But when I release the div, it just snaps back to where it was. Can I prevent that functionality where the element stays where I dragged it?
  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 08 Nov 2013 Link to this post

    Hello Marlon,

    You should also use a kendoDropTarget or kendoDropTargetArea and handle drop event. 

    Regards,
    Daniel
    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. OMER
    OMER avatar
    32 posts
    Member since:
    Dec 2013

    Posted 23 Apr 2014 in reply to Daniel Link to this post

    Could you please give an example on how it is done?
    I tried doing that, but it doesn't happen.
    I've tried to set e.preventDefault() in the "dragend" event in the draggable item.
    I've added animation effects to the "e.target" in the "drop" event in the dropTarget element.
    It doesn't seem to work.
    Here's my plunkr: 
    http://plnkr.co/edit/APUkPgnGyxN9tr9gVd9Z?p=preview
    I get the wanted animation when I have a debug point, but get no animation otherwise.
  5. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 25 Apr 2014 Link to this post

    Hello,

    Basically, you should use the drop event to move the element or absolutely position it to the new position. I created a small example that demonstrates both cases.

    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. OMER
    OMER avatar
    32 posts
    Member since:
    Dec 2013

    Posted 29 May 2014 in reply to Daniel Link to this post

    Thanks. I'm half way where I want.
    What I'm interested in is this:
    1) Start dragging.
    2) On drop, do an effect on the hint (fade and zoom, to be exact :)).
    When I try to do it, the hint just disappears.
    Here's the plunkr:
    http://plnkr.co/edit/APUkPgnGyxN9tr9gVd9Z?p=preview
    How can I make the hint disappear with an effect?
  7. OMER
    OMER avatar
    32 posts
    Member since:
    Dec 2013

    Posted 29 May 2014 in reply to OMER Link to this post

    Ok,
    As it usually happens after posting in a forum, I have found a solution.
    Here's a working solution:
    http://plnkr.co/edit/APUkPgnGyxN9tr9gVd9Z?p=preview
    The idea was to clone the "hint" element, append it to the body, do the effect with the cloned element, and then remove it from the DOM.
    Even though I have found a solution that works, I would like to know if Telerik's staff has a better one (more efficient or API-ish, maybe).
  8. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 31 May 2014 Link to this post

    Hello,

    The approach seems correct. Currently, built-in animations for the hint on drop are not available.

    Regards,
    Daniel
    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