Issue #3025💬 AnsweredOpened September 15, 2020by trony20200 reactions

Make inside elements not movable with propagate

快速解答by artf

You can place another custom component in the middle which propagates those properties and also the draggable or, as the droppable is false on all components you can simply update all inner components on init

Read full answer below ↓

Question

代码片段TEXT
Hi, creating a component/block, we want elements inside not to be removed, edited or moved:
not removed and not edited ok but how to make them non movable?
Thanks!

$.get( "/iscrizionePrivacy.plp?a=VGsflaU2d7D0sUcDhl7lCkkX8tE1UW9kBzLcqcUAR_8-yKo74nLUmyXKrfIUst_kUirvlSC_A5sqeHrBsznmUg&locale=it_IT&fromBE=true", function( data ) {					  								    	
				    editor.DomComponents.addType('eb-privacy', {
				    	  // Make the editor understand when to bind `my-input-type`
				    	  // isComponent: el => el.tagName === 'INPUT',
				    	  // Model definition
				    	  model: {
				    	    // Default properties
				    	    defaults: {
				    	      //tagName: 'input',
				    	      //draggable: 'form, form *', // Can be dropped only inside `form` elements
				    	      droppable: false, // Can't drop other elements inside
				    	      editable: false,
				    	      removable: false,
				    	      resizable: true,	
				    	      propagate: ['droppable', 'editable', 'removable'],
				    	      components: data				    	      
				    	      
				    	    }
				    	  }
				    	});			    			    			       
				   editor.BlockManager.add('test-COMPONENT-PRIVACY', {
				    	  label: 'test-COMPONENT-PRIVACY',
				    	  content: '<div data-gjs-type="eb-privacy">Test Privacy Component</div>',
				   });				    				    
			 	});

Answers (3)

artfSeptember 16, 2020

You can place another custom component in the middle which propagates those properties and also the draggable or, as the droppable is false on all components you can simply update all inner components on init

const doTheThing = items => items.forEach(item => {
    item.set({ draggable: false, removable: false, ... })
    doTheThing(item.components());
});
editor.DomComponents.addType('eb-privacy', {
...
  defaults: { ... },

  init() {
   doTheThing(this.components());
  }
...
trony2020September 16, 2020
代码片段TEXT
Following code prints only "........ doTheThing 3......" Seems init() it's not called:

 `$.get( "/iscrizionePrivacy.plp?a=VGsflaU2d7D0sUcDhl7lCkkX8tE1UW9kBzLcqcUAR_8-yKo74nLUmyXKrfIUst_kUirvlSC_A5sqeHrBsznmUg&locale=it_IT&fromBE=true", function( data ) {					  								    	
				    
			    	const doTheThing = items => items.forEach(item => {
			    	    item.set({ draggable: false })
			    	    console.log (" ........ doTheThing 2...... ");
			    	    doTheThing(item.components());
			    	});
			    	console.log (" ........ doTheThing 3...... ");
			    	
			    	editor.DomComponents.addType('eb-privacy', {
				    	  // Make the editor understand when to bind `my-input-type`
				    	  // isComponent: el => el.tagName === 'INPUT',
				    	  // Model definition
				    	  model: {
				    	    // Default properties
					    	    defaults: {
					    	        //tagName: 'input',
					    	        //draggable: 'form, form *', // Can be dropped only inside `form` elements
					    	        droppable: false, // Can't drop other elements inside
					    	        editable: false,
					    	        removable: false,
					    	        resizable: true,	
					    	        propagate: ['droppable', 'editable', 'removable'],
					    	        components: data				    	      
					    	      
					    	    },
					    	    init() {
					    	    	console.log (" ........ doTheThing 1...... ");
					    	        doTheThing(this.components());
					    	    }				    	    
				    	  }
				    	  
				    	  
				   });			    			    			       
				   editor.BlockManager.add('test-COMPONENT-PRIVACY', {
				    	  label: 'test-COMPONENT-PRIVACY',
				    	  content: '<div data-gjs-type="eb-privacy">Test Privacy Component</div>',
				   });				    				    
			 	});`
artfSeptember 23, 2020

You have to use the component in the canvas

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.