draggable禁止拖动_通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽...

前言

关于讲解 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

draggable禁止拖动_通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽...相关推荐

electron 解压zip_node.js实现简单的压缩/解压缩功能示例
本文实例讲述了node.js实现简单的压缩/解压缩功能.分享给大家供大家参考,具体如下: 压缩的例子非常简单的几行代码,就完成了本地文件的gzip压缩. var fs = require('fs') ...
java使用重绘实现拖动_原生JS使用Canvas实现拖拽式绘图功能
一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包含圆心坐标点和半径)等实体 2.原生JavaScript实现,不依赖任何第三方j ...
instanceof用法_「JS很简单」JavaScript 基础之 instanceof操作符
最近开始在整理ES6/ES7/ES8/ES9的知识点(已经上传到我的博客上),碰到一些知识点是自己已经忘记(用得少的知识点),于是也重新复习了一遍. 这篇文章要复习的 instanceof 是我在 ...
10次机会 js 猜数_用JS实现简单的猜数小游戏
js的猜数游戏所用的知识点很少,主要的有随机产生一个随机整数,然后就是利用循环和if语句来做判断来实现游戏第一步:我们要先随机产生出一个1-1000之间的整数 var num=Math.round( ...
qt禁止拖动_[Qt]QMdiArea,无框架窗口的拖动
0:QMdiArea中添加子窗口后,想固定or调整窗口的大小需要在addSubWindow()函数调用后返回子窗口的指针,然后再设置子窗口的大小注意设置imagelabel的大小是没有效果的,im ...
用java编写一个抛物线运动_用js实现简单的抛物线运动
前言老早就看过一些购物车的抛物线效果,也想自己凑热闹动手来实现一遍. 然后(lll￢ω￢) 书到用时方恨少,发现高中学到物理啊.数学啊,都忘光了,抛物线公式都忘了0 0. 顺手百度一波,从百度可知: ...
利用Vue.js实现简单的留言板功能
此案例主要实现点击发送留言的按钮,将我们的留言以及留言人的信息展示在留言板上,下面就是具体的步骤: 一 .搭建整个留言板页面结构为了页面整体效果稍微好看一点,此案例运用bootstrap框架对页面表 ...
用python做一个购物车编程_利用python实现简单的循环购物车功能示例代码
本文主要给大家介绍了关于python实现循环购物车功能的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 示例代码 # -*- coding: utf-8 -*- __author__ = ...
vue实现搜索框记录搜索历史_使用JS location实现搜索框历史记录功能_苏颜_前端开发者...
首先,来看下效果图(样式什么的就不必吐槽了哈) 搜索记录: //用于保存记录信息 * { margin: 0; padding: 0; } input { border: 0; vertical-al ...

draggable禁止拖动_通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽...

draggable禁止拖动_通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽...相关推荐

最新文章

热门文章