Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Draggable elements

Draggable elements

Scheduled Pinned Locked Moved General Discussion
6 Posts 4 Posters 904 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    M4rt1n
    wrote on last edited by
    #1

    Hey everyone,

    I'm trying to create a class to make images draggable. I have this simple java script, but it somehow doesn't do the trick. Can anyone spot the error? I read the Lay Theme documentation, but couldn't find an answer.

    <script>
    jQuery(function() {
    jQuery( ".sticker" ).draggable();
    });
    </script>

    I tested it here: http://martinmajor.com/drag-test

    Thanks
    Martin

    1 Reply Last reply
    0
    • mariusjopenM Offline
      mariusjopenM Offline
      mariusjopen
      Global Moderator
      wrote on last edited by
      #2

      Dear @M4rt1n

      I think I replied before but maybe my message got lost.

      This code needs a extra jQuery library.
      We do not recommend to install other libraries because they might interfere with the functionality of LayTheme.

      Also you should have a look in the LayTheme Documentary about how to use Javascript.

      Best!

      Marius

      www.mariusjopen.world

      1 Reply Last reply
      0
      • daniD Offline
        daniD Offline
        dani
        wrote on last edited by
        #3

        hi,

        like this : http://danielcampbell.ca/post-it
        ???

        add this to 'custom HTML at top' :

        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

        <script>

        window.laytheme.on("newpageshown", function(layoutObj, type, obj){

        jQuery( function() {
        jQuery(".post").draggable();
        } );

        /* click div to bring to front */
        jQuery(function() {
        var maxz = jQuery('.post:last').css("zIndex");
        jQuery(".post").on("drag",function(){
        maxz++;
        jQuery(this).css('z-index',maxz);
        } );

        /* fade in divs - set .post to opacity:0; /
        jQuery('.post').each(function(i) {
        jQuery(this).delay((i++) * 500).fadeTo(1000, .99).css({"margin-left":i
        100, "margin-top":i*100});
        } );

        /* close parent div on x */
        jQuery('.close').on("click", function () {
        $(this).parent('div').fadeOut();
        });
        });
        });
        </script>

        and this to CSS
        (modify as your like) :

        /* post-it */
        .post {
        z-index: 1;
        position: absolute;
        width: 300px;
        min-height: 200px;
        padding: 20px;
        opacity: 0;
        overflow: scroll;
        background-color: #ffffbc;
        cursor: grab;
        cursor: -webkit-grab;
        }
        .close {
        display:inline-block;
        }
        .close::after {
        content: "\00D7";
        text-align: right;
        display:inline-block;
        position: absolute;
        font-size: 30px;
        font-weight: 100;
        right: 12px;
        top: 0px;
        width: 20px;
        height: 20px;
        z-index: 3;
        color: black;
        }
        div.close:hover:after {
        color: red;
        }

        Have fun :D

        https://danielcampbell.ca

        1 Reply Last reply
        2
        • mariusjopenM Offline
          mariusjopenM Offline
          mariusjopen
          Global Moderator
          wrote on last edited by
          #4

          Dear @dani
          Sweet! Very nice of you for sharing!

          Thank you a lot!

          Best!

          Marius

          www.mariusjopen.world

          1 Reply Last reply
          0
          • K Offline
            K Offline
            kanouu1
            wrote on last edited by
            #5

            With the recent update this is not working anymore :(

            1 Reply Last reply
            0
            • mariusjopenM Offline
              mariusjopenM Offline
              mariusjopen
              Global Moderator
              wrote on last edited by
              #6

              Dear @kanouu1
              can you post a link that I can have a look?

              Best!

              marius

              www.mariusjopen.world

              1 Reply Last reply
              0
              Reply
              • Reply as topic
              Log in to reply
              • Oldest to Newest
              • Newest to Oldest
              • Most Votes


              I also code custom websites or custom Lay features.
              šŸ’æ Email me here: šŸ’æ
              info@laytheme.com

              Before you post:
              1. When using a WordPress Cache plugin, disable it or clear your cache.
              2. Update Lay Theme and all Lay Theme Addons
              3. Disable all Plugins
              4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

              This often solves issues you might run into

              When you post:
              1. Post a link to where the problem is
              2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
              3. If the problem is difficult to explain, post screenshots / link to a video to explain it
              Online Users
              Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
              laytheme.com
              • Login

              • Don't have an account? Register

              • Login or register to search.
              • First post
                Last post
              0
              • Recent
              • Tags
              • Popular
              • Users
              • Search