#4747 closed bug (notabug)

Opened August 04, 2009 05:14PM UTC

Closed August 06, 2009 02:30PM UTC

Last modified October 11, 2012 09:15PM UTC

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>
Attachments (0)
Change History (3)

Changed August 04, 2009 09:51PM UTC by Deneb87 comment:1

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)

Changed August 06, 2009 02:30PM UTC by scottgonzalez comment:2

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.

Changed October 11, 2012 09:15PM UTC by scottgonzalez comment:3

milestone: TBD

Milestone TBD deleted