Post
Ask Question

Auto Scroll In kendoDraggable

kendoDraggable allows the DOM element to move around HTML body using mouse, or finger for touch device. This blog elaborates how to implement the kendoDraggable with the auto scroll option.

In certain scenario, if the target and source element is far away with the scrolling, the auto scroll option will be helpful to achieve our goal.

Please read my previous blog where I have explained how to implement the kendoDraggable in our HTML page, with basic example.
 
Code 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.       
  5.     <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>  
  6.     <title></title>  
  7.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css"/>    
  8. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.rtl.min.css"/>    
  9. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.silver.min.css"/>    
  10. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.mobile.all.min.css"/>    
  11. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>    
  12. <script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>    
  13. </head>  
  14. <body>  
  15.   
  16.          <div id="example">  
  17.   
  18.             <div class="demo-section k-content">  
  19.                     <div id="draggable"></div>  
  20.                 <div id="droptarget" class="k-header">Drag the small circle here.</div>  
  21.                   
  22.             </div>  
  23.           
  24.   
  25.             <script>  
  26.                 function draggableOnDragStart(e) {  
  27.                     $("#draggable").addClass("hollow");  
  28.                     $("#droptarget").text("Drop here.");  
  29.                     $("#droptarget").removeClass("painted");  
  30.                 }  
  31.   
  32.                 function droptargetOnDragEnter(e) {  
  33.                     $("#droptarget").text("Now drop...");  
  34.                     $("#droptarget").addClass("painted");  
  35.                 }  
  36.   
  37.                 function droptargetOnDragLeave(e) {  
  38.                     $("#droptarget").text("Drop here.");  
  39.                     $("#droptarget").removeClass("painted");  
  40.                 }  
  41.   
  42.                 function droptargetOnDrop(e) {  
  43.                     $("#droptarget").text("You did great!");  
  44.                     $("#draggable").removeClass("hollow");  
  45.                 }  
  46.   
  47.                 function draggableOnDragEnd(e) {  
  48.                     var draggable = $("#draggable");  
  49.   
  50.                     if (!draggable.data("kendoDraggable").dropped) {  
  51.                         // drag ended outside of any droptarget  
  52.                         $("#droptarget").text("Try again!");  
  53.                     }  
  54.   
  55.                     draggable.removeClass("hollow");  
  56.                 }  
  57.   
  58.                 $(document).ready(function() {  
  59.                     $("#draggable").kendoDraggable({  
  60.                         hint: function() {  
  61.                             return $("#draggable").clone();  
  62.                         },  
  63.                         dragstart: draggableOnDragStart,  
  64.                         dragend: draggableOnDragEnd,  
  65.                         autoScroll:true  
  66.                     });  
  67.   
  68.                     $("#droptarget").kendoDropTarget({  
  69.                         dragenter: droptargetOnDragEnter,  
  70.                         dragleave: droptargetOnDragLeave,  
  71.                         drop: droptargetOnDrop  
  72.                     });  
  73.   
  74.                     var draggable = $("#draggable").data("kendoDraggable");  
  75.   
  76.                       
  77.                 });  
  78.             </script>  
  79.   
  80.             <style>  
  81.                 #draggable {  
  82.                     cursor: move;  
  83.                     position: absolute;  
  84.                     top: 260px;  
  85.                     left: 50%;  
  86.                     margin-left: -28px;  
  87.                     width: 56px;  
  88.                     height: 56px;  
  89.                     border-radius: 50%;  
  90.                     background-color: #03a9f4;  
  91.                     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);  
  92.                 }  
  93.                 .painted {  
  94.                     background-color: #03a9f4;  
  95.                     color: #fff;  
  96.                 }  
  97.                   
  98.                 #draggable.hollow  
  99.                 {  
  100.                     cursor: default;  
  101.                     background: #ececec;  
  102.                 }  
  103.                   
  104.                 #droptarget  
  105.                 {  
  106.                     height: 200px;  
  107.                     width: 200px;  
  108.                     font-size: 14px;  
  109.                     border-radius: 50%;  
  110.                     text-align: center;  
  111.                     line-height: 200px;  
  112.                     margin: 0 auto;  
  113.                     cursor: default;  
  114.                     border: 1px solid #999;  
  115.                 }  
  116.   
  117.                 .demo-section  
  118.                 {  
  119.                     height: 200px;  
  120.                     position: relative;  
  121.                     overflow:auto;  
  122.                 }  
  123.             </style>  
  124.         </div>  
  125.   
  126.   
  127. </body>  
  128. </html>  
The above code clearly says that the auto-scroll property of the kendoDraggable should be enabled to implement the auto scroll while doing drag and drop in our application.
 
Note - We should define the height of the div tag where the dragging is defined to enable the auto scrolling in it. 
 
Result
 
 
 
 
 

I hope you enjoyed this blog. Your valuable feedback, question, or comments about this blog are always welcome.
Next Recommended Reading Auto Fit Column In Kendo Grid