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

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

2 Answers 641 Views
Drag and Drop
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 14 Jan 2013, 03:29 PM
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 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 16 Jan 2013, 02:23 PM
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!
0
Chris
Top achievements
Rank 1
answered on 16 Jan 2013, 03:48 PM
Thank you Alexander, your help is much appreciated.
Tags
Drag and Drop
Asked by
Chris
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Chris
Top achievements
Rank 1
Share this question
or