drag sensitivity

Apr 16, 2010 at 7:34 AM

Hi all,

I test DragSort with JQuery AD Gallery where DragSort is reponsible for, you know, sorting. Here's an example (sorry for a lot of Russian words but the images are all what we need for now) -

http://www.irk.fm/proto/design/html2/template-photo-edit.html

Each thumbnail image is clickable, the click loads new picture in the preview area. Each thumbnail is also draggable thanks to DragSort. But currently DragSort handles single clicks like drag operation also. Sometimes it even causes unwanted exchange of the clicked thumbnail with its neighbour.

So is there any option to decrease DragSort sensitivity ? It would be nice to be able to set it to X pixels so if the target is moved less than X the movement is not interpreted as drag but as click.

Besides of that I should say I'm very impressed of the plugin and its seamless integration with the gallery.

Coordinator
Apr 17, 2010 at 2:17 AM
Edited Apr 17, 2010 at 2:20 AM

> Sometimes it even causes unwanted exchange of the clicked thumbnail with its neighbour.

Thanks, that's actually a bug in my code which I'll fix for the next version but will explain. Basically as soon as you click on an LI it get's styled position absolute so that it can be positioned where the mouse cursor is using css top and left. But as a result it no longer affects the layout of the rest of the LI's in the UL list, so a place holder LI tag is inserted to indicate where the dragged LI would appear in the list. In my code I set the height of the placeholder LI tag with that of the dragged LI but not the width, so as soon as you click an image to drag in your scenario the next image would immediately move in behind it and any movement to the right is considered to be dragging the image over another image so a swap is performed. Anyway here is the fix:

Replace:
list.placeHolderItem = list.draggedItem.next().css("height", list.draggedItem.height()).attr("placeHolder", true);

With:
list.placeHolderItem = list.draggedItem.next().css({ height: list.draggedItem.height(), width: list.draggedItem.width() }).attr("placeHolder", true);

> So is there any option to decrease DragSort sensitivity?

No there's not. However here is the code to implement this:

grabItem: function(e) {
   if (e.button == 2 || $(e.target).is(opts.dragSelectorExclude))
       return;

   var elm = e.target;
   while (!$(elm).is("[listIdx=" + $(this).attr("listIdx") + "] " + opts.dragSelector)) {
       if (elm == this) return;
       elm = elm.parentNode;
   }
   var x = e.pageX, y = e.pageY;
   list = lists[$(this).attr("listIdx")];
   var ismousedown = true;
   $(document).mouseup(function() { ismousedown = false; });

   window.setTimeout(function() {
       if (!ismousedown)
           return;

       if (list != null && list.draggedItem != null)
           list.dropItem();

       ...
       list.offset.top = y - list.offset.top + (isNaN(mt) ? 0 : mt) - 1;
       list.offset.left = x - list.offset.left + (isNaN(ml) ? 0 : ml) - 1;

       ...
       list.setPos(x, y);
       ...
   }, 100); //play with this value to change sensitivity

   return false; //stop moz text selection
},

That's an interesting gallery you found, thanks for sharing it.

Apr 20, 2010 at 5:22 AM

Thank you ! The placeholder fix worked like expected. The second one didn't work properly, may be I just didn't implement it correctly - you can see that http://www.irk.fm/proto/design/html2/template-photo-edit.html causes "list is undefined" JavaScript error. So I'd better wait your own fix :)

Apr 27, 2010 at 6:45 AM

Found the error, and aftex fixing it's working like a charm!

Coordinator
Apr 28, 2010 at 7:49 AM

Sorry about that, attaching the modified js file would have been easier. Glad you got it sorted.