Disabling drop event on a Column in 3 Column Layout

Hey Guys,

I have a 3 column layout and I am using the Workspaces. The 2nd Column needs to be fixed and I donot want to drop the Portlets in the 2nd Column. What is the approach to achieve this? 

I have used something like Noodle.model(columnID).setFloated(false);

But I am not able to achieve this option. Can somebody suggest an approach.


1 Like

You’ll have to inject some logic into the Drag and Drop functionality. One way to do this, is to place your javascript logic into a portlet and add the portlet to the Footer of the current shell.

Here’s the javascript:

OpenAjax.hub.subscribe("Noodle.page.load", function(name, page) {
	console.log("Replacing Noodle.page.onDropHover");
	Noodle.page._onDropHover = Noodle.page.onDropHover;
	Noodle.page.onDropHover =  function(cur, drag, drop) {
		if (cur.grid && cur.grid.columns) {
			if (cur.grid.columns.length == 3) {
				cur.grid.columns.splice(1, 1); //remove the middle column
		Noodle.page._onDropHover(cur, drag, drop);

Please see the attached project as well.
JavascriptOverride.zip (11.8 KB)

Thanks Mark,

We are able to achieve the required functionality with your help.