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.
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;
},
});
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>
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;
},
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.