我试图授权仅在其容器的右侧或底部拖出一个对象，但如果不停止拖动该元素，则无法正确执行此操作。
我的代码:
<!DOCTYPE html>
<html>
<head>
<style>
#parent { height: 500px; width: 500px; border: 1px black solid; }
#images { height: 100px; width: 100px; background-color:orange; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
</head>
<body>
<div id="parent">
<div id="images"></div>
</div>
<script>
$(document).ready(function() {
$("#images").draggable({
containment: $("#parent"),
drag: function(event, ui) {
var helper = ui.helper, pos = ui.position;
if(pos.left + parseInt(helper.outerWidth(), 10) == parseInt($("#parent").css("width"), 10)) {
$("#parent").animate({width: "+=100"});
}
if(pos.top + parseInt(helper.outerHeight(), 10) == parseInt($("#parent").css("height"), 10)) {
$("#parent").animate({height: "+=100"});
}
}
});
});
</script>
</body>
</html>
您知道如何刷新容器大小以便继续在右侧或底部拖动吗？
谢谢!
最佳答案
简单的解决方案(请参阅 DEMO ):
<!DOCTYPE html>
<html>
<head>
<style>
#parent { height: 300px; width: 300px; border: 1px black solid; position: relative; left: 0; }
#images { height: 100px; width: 100px; background-color:orange; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
</head>
<body>
<div id="parent">
<div class="container">
<div id="images"></div>
</div>
</div>
<script>
$(document).ready(function() {
var
$document = $(document),
$parent = $("#parent"),
$container = $(".container", $parent),
offset = $container.offset(),
scrollbarSafety = 15; // use this to avoid dragging outside of window, thus creating scrollbars and wreaking all kinds of havoc on draggables containment checks
$container
.width($document.width() - offset.left - scrollbarSafety)
.height($document.height() - offset.top - scrollbarSafety);
$("#images")
.draggable(
{
containment: $container,
drag:
function(event, ui)
{
var
$draggee = $(this),
draggeePosition = $draggee.position(),
shouldWidth = draggeePosition.left + $draggee.width(),
shouldHeight = draggeePosition.top + $draggee.height();
if($parent.width() < shouldWidth)
{
$parent.width(shouldWidth);
}
if($parent.height() < shouldHeight)
{
$parent.height(shouldHeight);
}
}
}
);
});
</script>
</body>
</html>
关于jquery-ui - 可拖动和可扩展的遏制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3876967/