Draggable feature

[Giandomenico Pastore]

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

[stworthy]

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>

[Giandomenico Pastore]

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?

[stworthy]

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>

[Giandomenico Pastore]

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.