脚本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 相关文章推荐
javascript中的new使用
Mar 20 Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
24款热门实用的jQuery插件推荐
Dec 24 Javascript
js实现新年倒计时效果
Dec 10 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
简单谈谈axios中的get,post方法
Jun 25 Javascript
Angular17之Angular自定义指令详解
Jan 21 Javascript
微信小程序实现自上而下字幕滚动
Jul 14 Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
vue 开发之路由配置方法详解
Dec 02 Javascript
JS实现网页烟花动画效果
Mar 10 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 文件缓存的性能测试
2010/04/25 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
2016/07/09 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
Python中tell()方法的使用详解
2015/05/24 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
模范家庭事迹材料
2014/02/10 职场文书
会计岗位职责范本
2014/03/07 职场文书
个人贷款担保书
2014/04/01 职场文书
团日活动总结模板
2014/06/25 职场文书
高中综合实践活动总结
2014/07/07 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
早上好问候语大全
2015/11/10 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书