部落格

使用 lightbox 時，預設都是點擊就開啟效果，如果需搭配 draggable, droppable 或 sortable 等需要點擊拖曳的效果時，就會發生拖曳卻一直開 lightbox 的窘境。

參考了 An Awesome CSS3 Lightbox Gallery With jQuery 後，發現簡易解法（以 jQuery UI Sortable 為例）：

1. 建立 preventClick 變數決定是否需遮蔽事件
2. 在開始拖曳時的 start 事件將此變數設為 true（遮蔽）
3. 拖曳停止時變數設為 false（不遮蔽）

var preventClick = false;

//覆寫 fancybox Click event
jQuery('a.fancybox').bind('click', function(e){
  if (preventClick) {
    e.stopImmediatePropagation();
    e.preventDefault();
  }
});

//建立 sortable
jQuery('#sortable').sortable({
  start: function () {
    preventClick = true;
  },
  stop: function () {
    //等候 200 毫秒再恢復避免滑鼠放開時就觸發 lightbox
    setTimeout(function () {
      preventClick = false;
    }, 200);
  }
});
jQuery('li').disableSelection();

資料參考:

• An Awesome CSS3 Lightbox Gallery With jQuery
• jQuery draggable list with clickable objects within – preventing click on drag – Stack Overflow
• jQuery Sortable — remove a default behavior while dragging, restore after a drop – Stack Overflow