前言
关于讲解 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'});
}return false;
}var dragEnd = function(e) {
isDragging= false;
}
$(handle).on('mousedown', dragStart);
$(document).on('mousemove', dragMove);
$(document).on('mouseup', dragEnd);
}
使用方法
演示 Demo HTML
