Element disappears when attempting drop away from the drop target

1 posts, 0 answers
  1. Lior
    Lior avatar
    3 posts
    Member since:
    Oct 2012

    Posted 03 Oct 2012 Link to this post

    Hello,

    I wrote a little demo that has two divs, one contains draggable buttons and the other is the drop target.
    I can drag buttons into the drop target just fine, and the drop target itself is also draggable so I can move the buttons around inside the drop target. 

    This works, but when I try to drag a button from the dropTarget div to some other place on the page, instead of just failing to drop it there (on a non-droppable section), the button disappears from the drop target div.

    This is the code, I'd appreciate if someone could tell me why this happens and if it can be avoided:

    <div id="draggable" style="background-color: lightgrey; height: 60px">
    Drag the buttons to the yellow section<br/>
        <button >Button 1</button>
            <button >Button 2</button>
            <button >Button 3</button>
    </div>
    <div id="dropTarget" style="background-color: yellow; height: 60px">
    </div>​

    var draggable = $("#draggable").kendoDraggable({
        filter: 'button',
        hint: function(item) {
            return $(item).clone();
        }
    });
    var dropTarget = $("#dropTarget").kendoDropTarget({
        dragAndDrop: true,
        drop: droptargetOnDrop
    }).kendoDraggable({
        filter: 'button',
        hint: function(item) {
            return $(item);
        }
    });
      
      
    function droptargetOnDrop(e) {
      //  console.log("drop called");
        var $target = $(e.target);
        $(e.draggable.hint).clone().appendTo(e.dropTarget)
    }

    Thanks
Back to Top