Icon is not moving up and down on drag

Question

I have created a div to limit the drag-able area inside the div. The main issue is when the icon is dragged up and down in the area, the area does not scroll with the icon but the icon gets hidden where screen ends. I have seen many tutorials for this but still unable to solve it. I am not sure if it is possible. please help me solving this. Thank you.

var maxDragX = 200 - $('.slide').outerWidth();
var maxDragY = 200 - $('.slide').outerHeight();

Draggable.create('.slide', {
  bounds: $('#grabbable-area') 
});

$(window).resize(function(){  
  Draggable.get('.slide').applyBounds("#grabbable-area");
});

#grabbable-area{
  display: block;
  position: relative;
  min-height: 1000px;
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  border: solid 1px red;
  background: grey;
}

.slide{
  display: block;
  position: absolute;
  height: 100px;
  width: 100px;
  background: red; 

}

.green{
    cursor: pointer; /* fallback if grab cursor is unsupported */
    cursor: pointer;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}



  
    Drag

user_6160662 · Answer

Pass autoScroll:1 in options for Draggable.create() this would make window automatically scroll to adjust the dragged item in view

More on autoScroll

var maxDragX = 200 - $('.slide').outerWidth();
var maxDragY = 200 - $('.slide').outerHeight();

Draggable.create('.slide', {
  bounds: $('#grabbable-area'),
  autoScroll: 1
  // ^----------------add this, use bigger number instead of 1 for faster "catch-up"
});

$(window).resize(function(){  
  Draggable.get('.slide').applyBounds("#grabbable-area");
});

#grabbable-area{
  display: block;
  position: relative;
  min-height: 1000px;
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  border: solid 1px red;
  background: grey;
}

.slide{
  display: block;
  position: absolute;
  height: 100px;
  width: 100px;
  background: red; 

}

.green{
    cursor: pointer; /* fallback if grab cursor is unsupported */
    cursor: pointer;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}



  
    Drag

Icon is not moving up and down on drag

1 Answers