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

Element disappears when attempting drop away from the drop target

0 Answers 72 Views
Drag and Drop
This is a migrated thread and some comments may be shown as answers.
Lior
Top achievements
Rank 1
Lior asked on 03 Oct 2012, 03:08 PM
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

No answers yet. Maybe you can help?

Tags
Drag and Drop
Asked by
Lior
Top achievements
Rank 1
Share this question
or