Print Page - Draggable feature

Title: Draggable feature
Post by: Giandomenico Pastore on October 21, 2012, 12:43:09 AM

Hi,
I can constrain a draggable object to be dragged only within the scope of its parent object?

Title: Re: Draggable feature
Post by: stworthy on October 21, 2012, 05:50:14 AM

Place the draggable object in a relative-positioned div.

Code:

<div style="position:relative;overflow:auto;width:400px;height:400px">
  <div class="easyui-draggable" style="width:100px;height:100px;border:1px solid #ccc"></div>
</div>

Title: Re: Draggable feature
Post by: Giandomenico Pastore on October 21, 2012, 11:21:09 PM

In this way the drag continues beyond the perimeter, although hiding overflow when going over is not seen. is possible make sure that the dragging can not go beyond the edges of the container div?

Title: Re: Draggable feature
Post by: stworthy on October 22, 2012, 12:01:58 AM

You can add some code in 'onDrag' and 'onStopDrag' events to limit the boundaries of the draggable area.

Code:

<script>
	function constrain(e){
		var d = e.data;
		if (d.left < 0){d.left = 0}
		if (d.top < 0){d.top = 0}
		if (d.left + $(d.target).outerWidth() > $(d.parent).width()){
			d.left = $(d.parent).width() - $(d.target).outerWidth();
		}
		if (d.top + $(d.target).outerHeight() > $(d.parent).height()){
			d.top = $(d.parent).height() - $(d.target).outerHeight();
		}
	}
</script>
<div style="position:relative;overflow:hidden;border:1px solid #ccc;width:400px;height:400px">
	<div class="easyui-draggable" style="width:100px;height:100px;border:1px solid #ccc" data-options="
				onDrag: function(e){
					constrain(e);
				},
				onStopDrag: function(e){
					constrain(e);
					$(this).css(e.data);
				}
			">
	</div>
</div>

Title: Re: Draggable feature
Post by: Giandomenico Pastore on October 22, 2012, 12:40:09 AM

Great! Thank you so much for your support. I think that this function may be integrated into the plugin "draggable", with an option such as "constrainInParent: true". Regards. ;)

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Giandomenico Pastore on October 21, 2012, 12:43:09 AM