[jQuery] 簡易拖曳效果

本文章將使用非常簡單的 jQuery ,輕鬆實作滑鼠拖曳的效果,不含任何其它例如 jQuery UI 之類的第三方函式庫,即可讓你輕鬆客製作效果。

情境思考

  1. mousedown:滑鼠按下,要被拖曳的元素觸發。
  2. mousemove:滑鼠拖曳其間,拖曳的元素位置隨著滑鼠改變位置。
  3. mouseup:滑鼠放開,結束整個拖曳流程。

程式碼

// 用來追蹤被拖曳的元素,預設為 null ,表示沒有任何元素在被拖曳。
var $dragging = null;

// 滑鼠按下:拖曳效果啟動
$("div.draggable").on("mousedown", function (e) {
  
  // 以下這三行,只是用來呈現我想要的效果,你可以客製化成你要的需求。
  // 意思是:我將某個元素複製一份,並讓該元素準備跟著滑鼠移動
  var nearest_li = $(e.target).closest("li");
  var create_dragging_el = $(nearest_li).find("div.draggable").clone().addClass("-dragging");
  $(nearest_li).append(create_dragging_el);

  // 這行最重要,將要被拖曳的元素,存進 $dragging 變數當中。
  $dragging = create_dragging_el;

});

// 滑鼠移動,$dragging 元素跟著滑鼠移動。
// document.body 意思是,我要在這個範圍(body),都可以移動,你可以改成其它你想客製化的形式。
$(document.body).on("mousemove", function(e) {
  if ($dragging) {
    $("body").addClass("-body-dragging");

    // 這行最重要,表示 $dragging 的位置跟著滑鼠,至於 +5 是因為我想讓該元素在滑鼠的右下角。
    $dragging.offset({
      top: e.pageY + 5,
      left: e.pageX + 5
    });
  }
});

// 滑鼠放開,結果拖曳。
$(document.body).on("mouseup", function (e) {
  if($dragging){
    if(e.target.id == "htmlpage"){

    }else{
      $dragging.animate({
          top: 0,
          left: 0
      });
    }
    $("body").removeClass("-body-dragging");
    $($dragging).fadeOut(function(){ $(this).remove() });

    // 這行最重要,$dragging 重新設定成 null,表示該元素拖曳結束,以上程式碼都可以自行客製化。
    $dragging = null;
  }
});

 

這裡可以看到完整的範例程式碼及效果喔:https://codepen.io/carlos411/pen/xrbNLe,html 我有再簡化,你可以客製化成想要的結果。

您可在此處留言

搶先留言!

avatar
  Subscribe  
Notify of