︎ Contact Support

Make a Draggable Element

This example of a draggable element is using the “Add a Chatbot“ customization.

You can use the image settings panel inside the Editor to allow viewers to drag your images around the page. See this feature in use in templates like Fruit Bowl or Desert Real Estate. Additionally, you can extend this functionality to almost any element in the page through the use of a

While editing a Page, open Code View (via the Formatting Toolbar) and wrap your element with the following div:
<div data-draggable>Draggable text</div>

Create a Handle 

If you want to have only a portion of an element act as the “handle” for something draggable, add an element nested inside the draggable container with a
<div data-draggable>
  <div class="draggable_handle">︎</div>
  <iframe src="https://player.vimeo.com/video/259763732?background=1&autoplay=1&loop=1&autopause=0" width="400" height="250" frameborder="0">

This will allow only the 
element to drag a video so that it can still receive normal click behavior.

You can style it like the above example by adding a
  selector into your CSS:
.draggable_handle {
    background: black;
    color: white;

[data-draggable] .draggable_handle > a {
    display: inline-block;
    padding: 0.1rem 0.0rem 0rem 0.35rem; 

Showing and Hiding

Add links inside the Code View that will show and hide a draggable element:
<a href="#" rel="show_draggable">Show draggable items</a>
<a href="#" rel="hide_draggable">Hide draggable items</a>
<a href="#" rel="toggle_draggable">Toggle draggable items</a>

The presence of a
link will cause all draggable items be hidden until the link is clicked.