Search the Community
Showing results for tags 'draggable div containing list'.
Found 1 result
-
Hi! Just a push in the right direction would be very helpful. I am trying to make a simple thumbnail gallery (will be colorbox.js powered) draggable horizontaly for screen and touch. I read in the description that drags vs clicks are detected, however I cannot figure out how to create this functionality. Drag only works when the containing div is dragged, not the thumbnails, it contains. How can I set this up so that the entire gallery is draggable unless a thumb is clicked or is there a simple solution that i am overlooking? I have created a codepens: http://codepen.io/anon/pen/bhtLp http://codepen.io/anon/pen/fuoki HTML <div class="gallery_block"> <ul class="thumbnail_list"> <a href="http://placehold.it/150x150"> <li> <img src="http://placehold.it/150x150"> </li> </a> <a href="http://placehold.it/150x150"> <li> <img src="http://placehold.it/150x150"> </li> </a> <a href="http://placehold.it/150x150"> <li> <img src="http://placehold.it/150x150"> </li> </a> <a href="http://placehold.it/150x150"> <li> <img src="http://placehold.it/150x150"> </li> </a> <a href="http://placehold.it/150x150"> <li> <img src="http://placehold.it/150x150"> </li> </a> <a href="http://placehold.it/150x150"> <li> <img src="http://placehold.it/150x150"> </li> </a> <a href="http://placehold.it/150x150"> <li> <img src="http://placehold.it/150x150"> </li> </a> </ul> </div> CSS .gallery_block { float: left; width: 500px; height: 400px; border: 1px solid #bebebe; overflow: hidden; } .thumbnail_list { float: left; width: 800px; height: 100%; list-style: none; } .thumbnail_list li img { float: left; } .thumbnail_list a { margin-right: 5px; margin-bottom: 5px; float:left; } JS <src='http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/utils/Draggable.min.js'></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js'></script> <script> var gridWidth = 150; Draggable.create(".thumbnail_list", { type:"x", edgeResistance:1.0, });
