Make a Dialog Draggable

Environment

Product

Progress® Kendo UI® Dialog for jQuery

Description

How to make a Dialog to be a draggable?

Solution

1. You should use the Draggable widget.
2. 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>

See Also

• API Reference of the Dialog
• API Reference of the Draggable