脚本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 支持ie和firefox杰奇翻页函数
Jul 22 Javascript
JQuery 引发两次$(document.ready)事件
Jan 15 Javascript
js 数组的for循环到底应该怎么写?
May 31 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 Javascript
动态加载脚本提升javascript性能
Feb 24 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 Javascript
jQuery 实现双击编辑表格功能
Jun 19 jQuery
vue.js实现刷新当前页面的方法教程
Jul 05 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 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
站长助手-网站web在线管理程序 v1.0 下载
2007/05/12 PHP
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
简单实现js浮动框
2016/12/13 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
VUE引入第三方js包及调用方法讲解
2019/03/01 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
js实现电灯开关效果
2021/01/19 Javascript
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
Python中optparse模块使用浅析
2015/01/01 Python
Python中利用原始套接字进行网络编程的示例
2015/05/04 Python
独特的python循环语句
2016/11/20 Python
关于python写入文件自动换行的问题
2018/06/23 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
Python字符串的常见操作实例小结
2019/04/08 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
简述安装Slackware Linux系统的过程
2012/01/12 面试题
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
新驾驶员个人自我评价
2014/01/03 职场文书
心得体会范文
2014/01/04 职场文书
车祸赔偿收入证明
2014/01/09 职场文书
学生感冒英文请假条
2014/02/04 职场文书
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
公司任命书范本
2014/06/04 职场文书
邀请函的格式
2015/01/30 职场文书
工作简历自我评价
2015/03/11 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python