2017年12月聚合文章--通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

[聚合文章] 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

原文链接: http://www.cnblogs.com/nzbin/p/8158440.html

前言

关于讲解 JS 的拖拽功能的文章数不胜数，我确实没有必要大费周章再写一篇重复的文章来吸引眼球。本文的重点是讲解如何在某些特定的元素上禁止拖拽。这是我在编写插件时遇到的问题，其实很多插件的拖拽功能并没有处理这些细节，经过翻阅 jquery ui 的源码才找到答案。

拖拽实现

关于拖拽功能不再啰嗦，直接贴代码

/**
 * [draggable 拖拽方法]
 * @param  {[type]} modal  [移动元素]
 * @param  {[type]} handle [拖拽元素]
 */
var draggable = function(modal, handle) {

  var isDragging = false;

  var startX = 0,
    startY = 0,

    left = 0,
    top = 0;

  var dragStart = function(e) {

    var e = e || window.event;

    e.preventDefault();

    isDragging = true;

    startX = e.clientX;
    startY = e.clientY;

    left = $(modal).offset().left;
    top = $(modal).offset().top;

  }

  var dragMove = function(e) {

    var e = e || window.event;

    e.preventDefault();

    if (isDragging) {

      var endX = e.clientX,
        endY = e.clientY,

        relativeX = endX - startX,
        relativeY = endY - startY;

      $(modal).css({
        left: relativeX + left + 'px',
        top: relativeY + top + 'px'
      });
                注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。