Make a Dialog Draggable
Environment
| Product | Progress® Kendo UI® Dialog for jQuery |
Description
How to make a Dialog to be a draggable?
Solution
- You should use the Draggable widget.
- You can handle the dragstart event and dragend event. You can hide and show the Dialog and its hint using the jQuery hide and show methods.
<div id="dialog"></div>
<script>
$("#dialog").kendoDialog({
animation:false,
title: "Kendo Dialog Component",
content: "This is your Kendo Dialog.",
closable: true
});
$(".k-dialog").kendoDraggable({
hint: function(element) {
return element.clone();
},
dragstart:function(e){
$(".k-dialog").first().hide()
},
dragend:function(e){
e.currentTarget[0].style.left = e.sender.hintOffset.left + "px";
e.currentTarget[0].style.top = e.sender.hintOffset.top + "px";
$(".k-dialog").first().show();
$(".k-dialog").last().hide();
}
});
</script>