Draggable elements
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
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
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
