Prevent default action of flying back to original position on ending the dragging outside of a drop target

3 posts, 0 answers
  1. Chris
    Chris avatar
    25 posts
    Member since:
    Apr 2011

    Posted 14 Jan 2013 Link to this post

    Hi,

    If I stop dragging an element outside of the drop target it 'flies' back to the original position.  Is there any way to prevent this?  Ideally, I'd like it to be able to just fade it out and have the original fade back in.  Any help would be appreciated on achieving this please?
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 16 Jan 2013 Link to this post

    Hi Chris,

    I suggest you to hook up to the dragstart, dragend and dragcancel events and use jQuery fadeIn/fadeOut methods to show and hide the draggable or its hint element. Here is the relevant documentation.
    $("#draggable").kendoDraggable({
        hint: function() {
            return $("#draggable").clone();
        },
        dragstart: function (e) {
            this.element.fadeOut();
        },
        dragend: function (e) {
            this.hint.fadeOut();
            this.element.fadeIn();
        },
        dragcancel: function (e) {
            this.hint.fadeOut();
            this.element.fadeIn();
        }
    });

    For convenience I created a jsBin example: http://jsbin.com/oneyof/2/edit

    Regards,
    Alexander Valchev
    the Telerik team
    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. Chris
    Chris avatar
    25 posts
    Member since:
    Apr 2011

    Posted 16 Jan 2013 Link to this post

    Thank you Alexander, your help is much appreciated.
Back to Top