Opened 10 years ago

Closed 10 years ago

Last modified 7 years ago

#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 10 years ago by Deneb87

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)

comment:2 Changed 10 years ago by Scott González

Resolution: invalid
Status: newclosed

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.

comment:3 Changed 7 years ago by Scott González

Milestone: TBD

Milestone TBD deleted

Note: See TracTickets for help on using tickets.