Drag and Drop


OU Campus includes the ability to drag and drop content including pages, files, and directories. Users may drag and drop objects from one location to another within the interface, or they may drag objects from their local computer into OU Campus

This is especially useful for quickly uploading files from a local computer to a server or moving content within OU Campus. Users can utilize the drag and drop functionality of the interface to move, upload, and insert content using what are referred to as "drop zones."

In addition to image file types, files with extensions of .html, .js, .txt, .xsl, .exe, .asp, .php, and .pcf may also be dragged to the Pages list view.

The Drop Zone

The drop zone refers to the area within OU Campus where a file or directory can be dropped when dragging to the interface.

When dragging files into or within OU Campus, The content area will be outlined in green or the content row will be highlighted in green to indicate where the dragged file will be placed. When dragging files from the local computer into OU Campus in order to upload them, a blue alert at the bottom of the screen will also appear to indicate where the file will be uploaded.

The example below shows the green outline in the content area of OU Campus, the green highlighted rows (which are folders into which content can be moved/uploaded), and the blue alert at the bottom of the screen.

Uploading from Desktop into OU Campus

Dragging content in to a page being edited with the Source Editor results in the dragged content being placed inline in the source code and highlighted.

Moving Content with Drag and Drop

Drag and drop functionality can be used to move files from one location to another within an OU Campus site. When Dependency Manager is on, content moved on the staging server, including directories, are silently republished to the production target and the links are updated automatically, unless the content is locked with an action that would otherwise prevent auto-publishing such as a scheduled expire. Moving content on the production server, including directories, will not be reflected on the staging server.

Content can be moved using drag and drop within and between the Pages list view and the File Navigation sidebar. Content can also be moved from the Gadgets sidebar into a directory in the Pages list view.

When moving files within OU Campus, a file with the same name cannot be overwritten; for example, moving an index.pcf file from one directory to another that already has an index.pcf file would result in an error notification and no files being moved.

Users can move files either individually or in bulk using drag and drop. To move files using drag and drop:

  1. Navigate to the Pages list view by selecting Content > Pages from the global navigation bar. Alternatively, expand the File Navigation sidebar and navigate to the file using that method.
  2. Once the file has been selected, drag the content to its new destination.

    Moving an Individual File with Drag and Drop

  3. To move multiple files, select the checkbox next to each target item in the Pages list view and then drag the content to the new destination folder. The icon displays a number, indicating the number of files being moved. Note: Multiple files cannot be selected from the File Navigation sidebar.

Moving Multiple Files Using Drag and Drop

Uploading Content with Drag and Drop

When Binary Management is not enabled, binary files uploaded through staging are either uploaded directly to the production server or the default publish target. With Binary Management enabled, binary files can be uploaded directly to staging.

Files can either be dragged and dropped directly into the Pages list view to upload them to the currently-shown directory, or they can be dragged into the Upload modal to add them to the upload queue, instead of browsing for them in a filechooser.

Uploading from Desktop into OU Campus

Drag and Drop in Upload Modal

Content uploaded to staging must be published or copied to production to be available on the web server. When dragging content that will take a lengthy amount of time to complete, users can continue to navigate around the CMS and a notification will show on the bottom of the screen upon the completion of the action.

For more information on uploading content, refer to the Upload page.

Inserting Content with Drag and Drop

When a user is in the WYSIWYG Editor or the Source Editor, they are also able to utilize drag and drop to insert content directly onto the page. Content can be inserted in the WYSIWYG Editor using the Images gadget. To insert images with the Images gadget:

  1. Ensure that the Images gadget is enabled by expanding the Gadgets sidebar and clicking Choose Gadgets (gear icon). Select Images from the dialog and click Save.
  2. Navigate to the page to be edited and open an editable region to display the WYSIWYG Editor.
  3. Expand the Images gadget in the Gadgets sidebar to display the available images.
  4. Drag and drop the image into the WYSIWYG Editor.

Dragging and Dropping with the Images Gadget