面向对象+jquery实现拖拽功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
position: absolute;
background: blue;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div class="div1"></div>
<script type="text/javascript">
/*
*拖拽
*/
class Drag{
constructor(){
this.item=$(".div1");
this.draX=0;//x轴偏移量
this.draY=0;//y轴偏移量
this.w=200;//宽
this.h=200;//高
this.l=0;//设置div的left
this.t=0;//设置div的top
}
init(){//初始化div
this.item.css({
width:this.w,
height:this.h
});
this.offsetGet();
}
offsetGet(){//得到偏移量
var _this=this;
this.item.mousedown(function(ev){
var e=ev || event;
_this.draX=e.clientX-_this.item[0].offsetLeft;//得到X轴偏移量
_this.draY=e.clientY-_this.item[0].offsetTop;//得到Y轴偏移量
_this.itemMove();
})
}
itemMove(){//移动div
var _this=this;
$(document).mousemove(function(ev){
var e=ev || event;
_this.l=e.clientX-_this.draX;//得到left的距离
_this.t=e.clientY-_this.draY;//得到top的距离 //判断左边距
if(_this.l<0){
_this.l=0;
}else if(_this.l>$(document)[0].documentElement.clientWidth-_this.item[0].offsetWidth){
_this.l=$(document)[0].documentElement.clientWidth-_this.item[0].offsetWidth
}
//判断上边距
if(_this.t<0){
_this.t=0;
}else if(_this.t>$(document)[0].documentElement.clientHeight-_this.item[0].offsetHeight){
_this.t=$(document)[0].documentElement.clientHeight-_this.item[0].offsetHeight
}
_this.item.css({
left:_this.l,
top:_this.t
}) })
this.overMove();
}
overMove(){//结束移动
$(document).mouseup(function(){
$(document).unbind();
})
}
}
$(function(){
var newDrag=new Drag();
newDrag.init();
})
</script>
</body>
</html>
源代码：https://github.com/G-xiaojianwei/study_demo/blob/master/%E6%8B%96%E6%8B%BD.html
面向对象+jquery实现拖拽功能的更多相关文章
- js进阶 12-17 jquery实现鼠标左键按下拖拽功能
js进阶 12-17 jquery实现鼠标左键按下拖拽功能 一.总结 一句话总结:监听的对象必须是文档,鼠标按下运行mousemove事件,鼠标松开取消mousemove事件的绑定,div的偏移的话是 ...
- 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽
前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...
- JQuery UI的拖拽功能
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...
- JQuery UI的拖拽功能实现方法小结
JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念 ...
- jquery sortTable拖拽排序
所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 ...
- jQuery 鼠标拖拽排序
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- 关于 JS 拖拽功能的冲突问题及解决方法
前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文 ...
- Js元素拖拽功能实现
Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...
- vuejs2.0使用Sortable.js实现的拖拽功能
简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...
随机推荐
- [BJWC2010] 严格次小生成树
[BJWC2010]严格次小生成树算法及模板 所谓次小生成树,即边权之和第二小的生成树,但所谓严格,就是不能和最小的那个相等. 求解严格次小生成树的方法一般有倍增和LCT两种.当然LCT那么高级的我当 ...
- 【BZOJ3379】【USACO2004】交作业 区间DP
题目描述 数轴上有\(n\)个点,你要从位置\(0\)去位置\(B\),你每秒钟可以移动\(1\)单位.还有\(m\)个限制,每个限制\((x,y)\)表示你要在第\(t\)秒之后(可以是第\(t\) ...
- Ubuntu下编写终端界面交互式C++小程序的一些Trick（小技巧，gnome-terminal）
类getch()功能的实现 I 只要在Windows下用过C/C++就会很熟悉conio.h库中的一个函数getch(),它可以绕过终端输入缓冲区直接从键盘读取一个字符,并且不在界面上显示. 但如果想 ...
- 构建SFTP服务
---------------增加sftp-----------------查看openssh的版本# ssh -V使用ssh -V 命令来查看openssh的版本,版本必须大于4.8p1,低于的这个 ...
- HDU 2604 Queuing（矩阵快速幂）
题目链接:Queuing 题意:有一支$2^L$长度的队伍,队伍中有female和male,求$2^L$长度的队伍中除 fmf 和 fff 的队列有多少. 题解:先推导递推式:$f[i]=f[i-1] ...
- javascript之奇淫技巧
最近准备面试,复习一下javascript,整理了一些javascript的奇淫技巧~ //为兼容ie的模拟Object.keys() Object.showkeys = function(obj) ...
- ElasticSearch 2 (9) - 在ElasticSearch之下（图解搜索的故事）
ElasticSearch 2 (9) - 在ElasticSearch之下(图解搜索的故事) 摘要 先自上而下,后自底向上的介绍ElasticSearch的底层工作原理,试图回答以下问题: 为什么我 ...
- ecplise 修改编码
1.修改eclipse默认工作空间编码方式 window->preferences->general->workspace 2.修改工程编码方式 项目右键->propertie ...
- java == 与 equals
1.基本数据类型用"==" java的基本数据类型,也称为原始的数据类型.它们分别是: byte, short, char, int, long, float, double, b ...
- react-native实现电影列表
页面运行效果 代码: import React, { Component } from "react"; import { Image, FlatList, StyleSheet, ...