Post
Ask Question

Change the div position using kendo draggable

Kendo Draggable allows the DOM element to move around the HTML body using the mouse or finger for touch device.
 
This blog say’s how to implement the kendo draggable and moving the div element around the HTML body using jQuery.
 
Coding 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8"/>  
  5. <title>Kendo UI Snippet</title>  
  6. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css"/>  
  7. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.rtl.min.css"/>  
  8. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.silver.min.css"/>  
  9. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.mobile.all.min.css"/>  
  10. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  11. <script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>  
  12. </head>  
  13. <body>  
  14. <body style="padding: 0; margin: 0; ">  
  15. <div id="drop" style="position: absolute;height:100%;width:100%">  
  16. <div class="draggable">  
  17. Please Move me....  
  18. </div>  
  19. </div>  
  20. </body>  
  21. <script>  
  22. $('.draggable').kendoDraggable({  
  23. hint : function (original) {  
  24. return original.clone().addClass("drag-clone");  
  25. },  
  26. dragstart: function (e) {  
  27. $(e.target).addClass("drag-hide");  
  28. }  
  29. });  
  30. $('body').kendoDropTarget({  
  31. drop: function (e) {  
  32. var pos = $(".drag-clone").offset();  
  33. $(e.draggable.currentTarget)  
  34. .removeClass("drag-hide")  
  35. .offset(pos);  
  36. }  
  37. })  
  38. </script>  
  39. <style>  
  40. .draggable {  
  41. position: absolute;  
  42. background: orange;  
  43. width: 200px;  
  44. height: 100px;  
  45. vertical-align: middle;  
  46. }  
  47. .drag-hide {  
  48. display: none;  
  49. }  
  50. .drag-clone {  
  51. background: orange;  
  52. }  
  53. </style>  
  54. </body>  
  55. </html>  
First we need to initialize the kendo draggable for the div (In my case I have used div class name as a selector)
The drop event in the kendoDropTarget is fired when the div is placed in new position.
 
Result
 
Initial Position
 
 
After Moving
 
 
I hope you enjoyed this blog. Your valuable feedback, question, or comments about this blog are always welcomed.
Next Recommended Reading Changing Time Format in Kendo TimePicker