CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ganidu Ranasinghe
Ganidu Ranasinghe

Reputation: 225

jQuery UI Draggable set drag length without containment property

I have a div without any parent element and I want the draggable DIV to drag to top and bottom but not all the way. I have done the top using,

drag: function (event, ui) {
      if(ui.position.top < 50)
      ui.position.top = 50;
},

However, I can't figure out a way to do this to bottom. When the element is dragged to the bottom I need to prevent it dragging from a certain position.

JSFIDDLE

HTML

<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>

Jquery

$( "#draggable" ).draggable({
        axis: 'y',
    containment: 'window',
        scroll: false,
    cancel: false,
    drag: function (event, ui) {
          if(ui.position.top < 50)
          ui.position.top = 50;
    },

});

Upvotes: 0

Views: 322

Answers (2)

Yom T.
Yom T.

Reputation: 9190

You need the parent/container's height to calculate the bottom offset:

$("#draggable").draggable({
  axis: 'y',
  containment: 'window',
  scroll: false,
  cancel: false,
  drag: function (event, ui) {
    var offset = 50;
    var maxHeight = (window.innerHeight - this.offsetHeight - offset);

    if (ui.position.top < offset) {
      ui.position.top = offset;
      return false;
    } 
    else if (ui.position.top > maxHeight) {
      ui.position.top = maxHeight;
      return false;
    }
  }    
});

Returning false might be required for canceling or basically "releasing" the dragging effect when it goes outside of the boundaries.

Here's your fiddle with the above changes:

$("#draggable").draggable({
  axis: 'y',
  containment: 'window',
  scroll: false,
  cancel: false,
  drag: function(event, ui) {
    var offset = 50;
    var maxHeight = (window.innerHeight - this.offsetHeight - offset);

    if (ui.position.top < offset) {
      ui.position.top = offset;
      //return false;
    } 
    else if (ui.position.top > maxHeight) {
      ui.position.top = maxHeight;
      //turn false;
    }
  },

});
html {
  overflow: hidden;
}

.ui-widget-content {
    width: 100%;
    padding: 15px;
}
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/overcast/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>

Upvotes: 1

Bogdan
Bogdan

Reputation: 399

Considering your div has no parent and you want to drag this across the entire document, you should add this to your code

$( "#draggable" ).draggable({
        axis: 'y',
    containment: 'window',
        scroll: false,
    cancel: false,
    drag: function (event, ui) {
          if(ui.position.top < 50)
          ui.position.top = 50;
          if(ui.position.top > $(document).height() - 50)
          ui.position.top = $(document).height() - 50;
    },

});

Upvotes: 0

Related Questions