脚本div实现拖放功能(两种)


Posted in Javascript onFebruary 13, 2017

网页上有很多拖曳的操作,比如拖动树状列表,可拖曳的图片等。

1.原生拖放实现

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>jQuery UI Autocomplete - Default functionality</title>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="external nofollow" >
 <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
 <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 <style>
 .drag{
 width: 200px;
 height: 200px;
 background-color: red;
 position: absolute;
 left:0;
 top:0;
 }
 </style>
 <script>
 $(function() {
 var _move = false;//判断目标对象书否处于移动状态
 var _x, _y;//鼠标离控件左上角的相对x.y坐标
 $('.drag').click(function(event) {
 }).mousedown(function(e) {//当按下鼠标左键时
 _move = true;//标记移动为true,开始移动
 _x = e.pageX - parseInt($('.drag').css('left'));//得到左上角的x的位置
 _y = e.pageY - parseInt($('.drag').css('top'));//得到左上角的y的位置
 $('.drag').fadeTo('20', 0.5);//单击后开始拖动
 
 });
 
 $(document).mousemove(function(e) {//监听鼠标移动
 if(_move) {
 var x = e.pageX - _x;//计算移动的距离
 var y = e.pageY - _y;
 $('.drag').css({top:y, left:x});
 }
 }).mouseup(function() {
 _move = false;
 $('.drag').fadeTo('fast', 1);
 });
 });
 </script>
</head>
<body>
 <div class="drag"></div>
</body>
</html>

2 jQuery UI draggable实现拖放

自行实现拖曳方法比较负责,jQuery UI提供了可拖曳的事件,允许用户非常简单的为一个div添加拖曳效果。

jQuery UI主要通过draggable事件来实现拖曳功能。

<script>
 $(document).ready(function(e) {
  $('.drag').draggable({cursor: 'move'});
  $('#enable').click(function(e) {
 $('.drag').draggable('enable');
  });
  $('#disable').click(function(event) {
 $('.drag').draggable('disable');
  });
  $('#deatroy').click(function(event) {
 $('.drag').draggable('destroy');
  });
 })
 </script>
</head>
<body>
 <button id="enable">enable</button>
 <button id="disable">disable</button>
 <button id="destroy">destroy</button>
 <div class="drag">
 <p>请拖动我!</p> 
 </div>
</body>

关于draggable的API可以参考draggalbe API

draggable 实例

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
再论Javascript的类继承
Mar 05 Javascript
自定义jQuery选项卡插件实例
Mar 27 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 Javascript
Underscore源码分析
Dec 30 Javascript
Google 地图API Map()构造器详解
Aug 06 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
微信小程序选择图片控件
Jan 19 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 #Javascript
判断横屏竖屏(三种)
Feb 13 #Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 #Javascript
jQuery实现大图轮播
Feb 13 #Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 #Javascript
你真的了解BOM中的history对象吗
Feb 13 #Javascript
微信小程序-获得用户输入内容
Feb 13 #Javascript
You might like
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
jQuery 1.0.2
2006/10/11 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
微信小程序实现弹幕墙(祝福墙)
2020/11/18 Javascript
python调用cmd复制文件代码分享
2013/12/27 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
Python tkinter实现的图片移动碰撞动画效果【附源码下载】
2018/01/04 Python
python日志logging模块使用方法分析
2019/05/23 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
Python调用REST API接口的几种方式汇总
2020/10/19 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
幼教个人求职信范文
2013/12/02 职场文书
解放思想演讲稿
2014/09/11 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
庆六一开幕词
2015/01/29 职场文书
同学会邀请函模板
2015/01/30 职场文书
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle