Draggable Div Containing List Anchors

[drmcgog]

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:

 

See the Pen bhtLp by anon (@anon) on CodePen

 

See the Pen fuoki by anon (@anon) on CodePen

 

 

 

 

 

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,

});

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

By default Draggable allows the default event in <a> tags, which your images are contained in, so in the codepens, as you describe the drag is ignored on this elements. In order to prevent this you have to include in your Draggable instance dragClickables:true, like this:

Draggable.create(".thumbnail_list",
{
  type:"x",
  edgeResistance:1.0, 
  dragClickables:true
}) 

Rodrigo.