Draggable Content

Design help Animations & Interactions
1

Hi,

I was wondering if anyone had experience with draggable content?
Much like this example:
https://webflow.com/website/Draggable-content

Only problem is this solution doesn’t seem to work on mobile.
Any ideas?

Thanks in advance.

2

on this website it also seems to work on tablets. https://www.the-lsa.org/

If that helps anyone… unfortunately I have very little experience with code.

3

I have found this:

It is working, however, how can I target a div on my website with this kind of solution? So it works for my div? instead of creating a new one?

Thanks for your help.

4

Hi @phelan,

Thanks for your post, I am here to help.

From the script instructions, I can see that there are three main elements, an outerContainer, a Container and an Item.

The outerContainer can be a div block with and element ID of “outerContainer”. The Container can be for example a Div Block placed on the page which will “Contain” your object that you wish to drag. For this container, you will add an ID in Element settings and make that id be “container”.

Then you will place some element inside the Container div block and give that an element id of “item”.

Then you can copy the styles in the example to your Head code section in page settings and paste the script portion to your Footer.

Here is how to use custom code: Custom code in head and body tags | Webflow University

Here is the CSS from the example that goes in the head:

<style>
    #container {
      width: 100%;
      height: 400px;
      background-color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 7px;
      touch-action: none;
    }
    #item {
      width: 100px;
      height: 100px;
      background-color: rgb(245, 230, 99);
      border: 10px solid rgba(136, 136, 136, .5);
      border-radius: 50%;
      touch-action: none;
      user-select: none;
    }
    #item:active {
      background-color: rgba(168, 218, 220, 1.00);
    }
    #item:hover {
      cursor: pointer;
      border-width: 20px;
    }
  </style>

and here is the code for the Footer:

<script>
    var dragItem = document.querySelector("#item");
    var container = document.querySelector("#container");

    var active = false;
    var currentX;
    var currentY;
    var initialX;
    var initialY;
    var xOffset = 0;
    var yOffset = 0;

    container.addEventListener("touchstart", dragStart, false);
    container.addEventListener("touchend", dragEnd, false);
    container.addEventListener("touchmove", drag, false);

    container.addEventListener("mousedown", dragStart, false);
    container.addEventListener("mouseup", dragEnd, false);
    container.addEventListener("mousemove", drag, false);

    function dragStart(e) {
      if (e.type === "touchstart") {
        initialX = e.touches[0].clientX - xOffset;
        initialY = e.touches[0].clientY - yOffset;
      } else {
        initialX = e.clientX - xOffset;
        initialY = e.clientY - yOffset;
      }

      if (e.target === dragItem) {
        active = true;
      }
    }

    function dragEnd(e) {
      initialX = currentX;
      initialY = currentY;

      active = false;
    }

    function drag(e) {
      if (active) {
      
        e.preventDefault();
      
        if (e.type === "touchmove") {
          currentX = e.touches[0].clientX - initialX;
          currentY = e.touches[0].clientY - initialY;
        } else {
          currentX = e.clientX - initialX;
          currentY = e.clientY - initialY;
        }

        xOffset = currentX;
        yOffset = currentY;

        setTranslate(currentX, currentY, dragItem);
      }
    }

    function setTranslate(xPos, yPos, el) {
      el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
    }
  </script>

You can then create your element structure in your site according to the html structure in the example:

 <div id="outerContainer">
    <div id="container">
      <div id="item">

      </div>
    </div>
  </div>

Custom code can be tricky sometimes, but this example script seems pretty straight forward, although I have not tested it on an actual project yet.

I hope this helps :slight_smile:

1 Like
5

This helps a lot. Thanks so much.

I will try it and get back to you.

1 Like
6

it works! Thanks for your help.
I deleted the styles from the header section code so it would just use whatever I set visually in Webflow.

see here the example

https://bingohavel-098db85d7b0d2d9eaf57065cf1c1.webflow.io/

1 Like
7

Hi @phelan, great to hear. Yes, I also try to create as many of the styles as possible in Webflow, it’s not to hard to recreate those in the designer.

Cool script! You might also be able to do things like:

  1. Drag the content to another div on the page
  2. Monitor that div being hovered for the hover event
  3. On hover event, call a click event on some element by id or class that trigger a built in Webflow interaction

It’s fun to experiment and dream big :slight_smile:

Just some ideas on how that could be used :slight_smile:

Thanks for sharing :slight_smile:

8

Hey @cyberdave thanks for the help. Can the element be vertically fixed and only horizontally scrollable?

1 Like
9

Hello! :slight_smile: I was wondering if anyone knows what parameters to change if I want the dragging to only happen horizontally?

10

Hi! This code works great but I can’t find the way to use it on multiple elements on the same container. I want to be able to move more than one element but i’m quite lost. Any help is much appreciated!