[Draggable Div Containing List Anchors]

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,

});