脚本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 相关文章推荐
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
js中的this关键字详解
Sep 25 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
分享我对JS插件开发的一些感想和心得
Feb 04 Javascript
VC调用javascript的几种方法(推荐)
Aug 09 Javascript
js实现一个猜数字游戏
Mar 31 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
vue 集成jTopo 处理方法
Aug 07 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 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生成随机数或者字符串的代码
2008/09/05 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
jQuery中Form相关知识汇总
2015/01/06 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
jQuery on()绑定动态元素出现的问题小结
2016/02/19 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
微信小程序单选框自定义赋值
2020/05/26 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
如何基于pythonnet调用halcon脚本
2020/01/20 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
轻松制作精彩视频:Animoto
2018/09/19 全球购物
Wallis官网:英国女装零售商
2020/01/21 全球购物
创业计划书中包含的9个方面
2013/12/26 职场文书
公司业务员岗位职责
2014/03/18 职场文书
专业见习报告范文
2014/11/03 职场文书
红高粱观后感
2015/06/10 职场文书
新员工入职感言范文!
2019/07/04 职场文书
mysql中between的边界,范围说明
2021/06/08 MySQL
Python与C++中梯度方向直方图的实现
2022/03/17 Python
聊聊配置 Nginx 访问与错误日志的问题
2022/05/25 Servers