Disabling Drag and Drop

7 posts, 0 answers
  1. Joao
    Joao avatar
    2 posts
    Member since:
    Oct 2011

    Posted 19 Oct 2011 Link to this post

    How do I disable dragging after the draggable hits its target?
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 20 Oct 2011 Link to this post

    Hello Joao,

    First, let me clarify your question. Do you mean

    "How do I prevent subsequent dragging of the same draggable object after it has been dropped over the expected drop target?"

    If this is what you mean, you can use a global Javascript variable as a flag and set it in the OnDrop event. Here is a demo based on this example:

    http://demos.kendoui.com/dragdrop/events.html

    var globalFlag = false;
     
    function draggableOnDragStart(e) {
        if (globalFlag) {
            e.preventDefault();
            return false;
        }
    }
     
    function droptargetOnDrop(e) {
        globalFlag = true;
    }


    Best wishes,
    Dimo
    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. Dmitriy
    Dmitriy avatar
    3 posts
    Member since:
    Jan 2012

    Posted 02 Apr 2012 Link to this post

    $(draggable).off();
  5. Eric
    Eric avatar
    8 posts
    Member since:
    Aug 2008

    Posted 14 Sep 2012 Link to this post

    I would like more information on this...

    The proposed solution will not work for me. I want to destroy the draggable object so that all of the drag events registered with the elements specified by my jQuery selector when creating the draggable object(s) are removed.

    I have attempted to call the .destroy() method on the draggable object(s), but to no avail, I am still able to drag the elements post my call to .destroy().

    The suggestion offered by Dmitriy will not work for me because there are other event handlers register with the elements in question.

    Any assistance/guidance would be appreciated.
  6. Nohinn
    Nohinn avatar
    167 posts
    Member since:
    Feb 2011

    Posted 14 Sep 2012 Link to this post

    To delete everything related to drag & drop:
    $('#draggable').removeData('kendoDraggable');
    $('#draggable').removeData('role');
    $('#draggable').unbind('mousedown');
    $('#draggable').unbind('selectstart');

    Though, as you can see it may turn out to be a bit more complex if you have assigned too a mousedown handler or a selectstart handler.
    Right now that handler would be also deleted, so your app may stop working as it should.
  7. Eric
    Eric avatar
    8 posts
    Member since:
    Aug 2008

    Posted 14 Sep 2012 Link to this post

    Thank you for your response Nohinn, i will give your suggestion a try; however, i do have other handlers specified for mouse down (one of the reasons why a call to .off() wouldn't work for me) so it may still be a no go. I suppose when registering the other event handlers I could namespace them and use that to exclude them from being unbound...

    Do you have any idea why a call to .destroy() wouldn't do this for me Nohinn, or have I missed the point of the .destroy() method altogether?

    Either way it seems odd that this ability is not built into the draggable object... any of the Telerik folks out there have any idea when a means to do this through the draggable API might be available in the control suite?
  8. Nohinn
    Nohinn avatar
    167 posts
    Member since:
    Feb 2011

    Posted 14 Sep 2012 Link to this post

    It looks like the destroy method for the drag & drop feature would just delete events owned by the kendoDraggable widget, those are:
    • drag
    • dragcancel
    • dragend
    • dragstart
    It also removes the keyup event handler, but I think they do nothing about the mousedown and selectstart event applied to the dom element.
Back to Top
Kendo UI is VS 2017 Ready