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 data-draggable attribute.
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 draggable_handle class:
<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">
</iframe>
</div>
This will allow only the draggable_handle 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 .draggable_handle selector into your CSS:.draggable_handle {
background: black;
color: white;
}
[data-draggable] .draggable_handle > a {
color:white;
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 elemnt:
<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 show_draggable link will cause all draggable items be hidden until the link is clicked.
/**
* Add a Chatbot
* See more at: https://support.cargo.site/Add-a-Chatbot
**/
.chat {
background:white;
border: 1px solid black;
display:none;
position: relative;
width: 100%;
flex-direction: column;
justify-content: space-between;
}
.chat.initialized {
display: flex;
}
.chat .chat_wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 70%;
}
.chat .chat_interior {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.chat .chat_output {
flex-grow: 2;
overflow-y: auto;
padding: 1rem;
display:flex;
flex-direction:column;
}
.chat .input_area {
border-top:1px solid black;
flex-shrink: 0;
line-height: 3.4rem;
display: flex;
}
.chat input {
display:block;
font:inherit;
height: 100%;
width: 50%;
border:0;
margin:0;
padding: 0 1rem;
flex-grow: 1;
}
.input_area .send_button {
background: white;
display:block;
border-top: none;
border-right: none;
border-bottom: none;
border-left: 1px solid black;
font:inherit;
height: 100%;
padding: 0 1rem;
}
.input_area .send_button:after {
content: "SEND"
}
.chat .agent.waiting {
color: transparent;
}
.chat .agent.waiting div {
background-color: rgba(0,0,0,0);
display:inline-block;
margin: 0 .3em 0.1em 0;
width: .4em;
height: .4em;
border-radius: 100%;
}
.chat .agent.waiting div:nth-child(1) {
animation: pulse 1s linear .2s infinite;
}
.chat .agent.waiting div:nth-child(2) {
animation: pulse 1s linear .4s infinite;
}
.chat .agent.waiting div:nth-child(3){
margin-right: 0;
animation: pulse 1s linear .6s infinite;
}
.chat .agent {
text-align:left;
margin-right: auto;
max-width: 75%;
padding: 0.45rem 0.75rem .5rem;
background: #eee;
display:inline-block;
}
.chat .user {
text-align:right;
margin-left: auto;
max-width: 75%;
padding: 0.45rem 0.75rem .5rem;
display: inline-block;
border: 1px solid #ccc;
}
.chat .user+.user {
margin-top: 0.3em;
}
.chat .agent+.agent {
margin-top: 0.3em;
}
.chat .user+.agent {
margin-top: 1em;
}
.chat .agent+.user {
margin-top: 1em;
}
.chat_end {
font-size: 0.8em;
opacity: 0.5;
text-align: center;
margin-top: 2em;
}
.chat .chat_end:after {
content: "This chat has ended.";
}
.chat .disabled {
pointer-events:none;
color: rgba(0, 0, 0, 0.4);
}
@keyframes pulse {
0% {
background-color: rgba(0,0,0,0);
}
50% {
background-color: rgba(0,0,0,0.3);
}
100% {
background-color: rgba(0,0,0,0);
}
}
[data-draggable].draggable_visible {
visibility: visible;
}
.draggable_element {
cursor: move;
}
[data-draggable] {
pointer-events: auto!important;
z-index: 9;
}
.draggable_handle {
background: black;
color: white;
}
bodycopy .draggable_handle > a {
color:white;
display: inline-block;
padding: 0.1rem 0.0rem 0rem 0.35rem;
}
↧