Draggable elements

[M4rt1n]

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

[mariusjopen]

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

[dani]

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":i100, "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

[mariusjopen]

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

Thank you a lot!

Best!

Marius

[kanouu1]

With the recent update this is not working anymore :(

[mariusjopen]

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

Best!

marius