#4747 closed bug (notabug)
containment-restriction not work for contained div bigger then containers with overflow:hidden
| Reported by: | Deneb87 | Owned by: | |
|---|---|---|---|
| Priority: | major | Milestone: | |
| Component: | ui.draggable | Version: | 1.7.2 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
containment-restriction not work for contained div bigger then containers with overflow:hidden
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.draggable.js"></script>
<style type="text/css">
.draggable { width: 800px; height: 570px; padding: 0; float: left; margin: 0; background-image:url('image800x570.png')}
#draggable { border:0; }
#containment-wrapper { width: 500px; height:250px; border:2px solid #ccc; padding: 0; overflow:hidden }
</style>
<script type="text/javascript">
$(function() {
$("#draggable").draggable({ cursor: 'pointer', containment: '#containment-wrapper', scroll: false });
});
</script>
</head>
<body>
<div id="containment-wrapper">
<div id="draggable" class="draggable"></div>
</div>
</body>
</html>
Change History (3)
comment:1 Changed 14 years ago by
comment:2 Changed 14 years ago by
| Resolution: | → invalid |
|---|---|
| Status: | new → closed |
Based on the functionality, and meaning, of containment it doesn't make sense to try to contain something in an element that's smaller than itself.
Note: See
TracTickets for help on using
tickets.
solved! now u can update the script. ui.draggable.js [start line 280]
this.containment = [ co.left - abxx + (parseInt($(ce).css("borderLeftWidth"),10) || 0) + (parseInt($(ce).css("paddingLeft"),10) || 0) - this.margins.left, co.top - abyy + (parseInt($(ce).css("borderTopWidth"),10) || 0) + (parseInt($(ce).css("paddingTop"),10) || 0) - this.margins.top, co.left + abxx +(over ? Math.max(ce.scrollWidth,ce.offsetWidth) : ce.offsetWidth) - (parseInt($(ce).css("borderLeftWidth"),10) || 0) - (parseInt($(ce).css("paddingRight"),10) || 0) - this.helperProportions.width - this.margins.left, co.top + abyy +(over ? Math.max(ce.scrollHeight,ce.offsetHeight) : ce.offsetHeight) - (parseInt($(ce).css("borderTopWidth"),10) || 0) - (parseInt($(ce).css("paddingBottom"),10) || 0) - this.helperProportions.height - this.margins.top ];where abxx and abyy are the difference, in px, between the draggable div and container div; make sense only when draggable size(x,y) > container size(x,y)