New to Kendo UI for jQuery? Download free 30-day trial

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

In this article