Discuz DIY tip: Add drag-and-drop areas to the template

1. Add more drag-and-drop areas to a template that already has a drag-and-drop area. In discuz! In most template files of the default X1 template, two to three drag-and-drop areas have been built in. But what if you think this is not enough, you need to add more drag-and-drop areas? Open the template file where you want to add a drag-and-drop area, and add the following code to the location you want to add: <! -- [DIY = diyid] --> <Div id = "diyid" class = "area"> </div> <! -- [/DIY] --> Copy code Note: diyid in [DIY = diyid] must be the same as the ID of the subsequent Div, and must be unique on the page, that is, it cannot be the same as the existing element ID on the page. 2. Add a drag-and-drop area to a template that does not have a drag-and-drop area or a new template page. A) add a tag for storing CSS code in the template file. The Code is as follows: <Style id = "diy_style" type = "text/CSS"> </style> Copy code B) add a drag-and-drop area to the template file. <! -- [DIY = diyid] --> <Div id = "diyid" class = "area"> </div> <! -- [/DIY] --> Copy code Note: diyid in [DIY = diyid] must be the same as the ID of the subsequent Div, and must be unique on the page, that is, it cannot be the same as the existing element ID on the page. C) load the drag-and-drop template in the program code (PHP file) Take the template/default/home/testtpl.htm as an example: The method for loading a normal template is: Template ('home/testtpl '); Copy code DIY template loading method: Template ('diy: Home/testtpl '); Copy code