脚本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 精粹笔记
May 09 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 Javascript
js获取当前页面的url网址信息
Jun 12 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
js实现web调用摄像头 js截取视频画面
Apr 21 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 09 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
一个odbc连mssql分页的类
2006/10/09 PHP
用PHP和ACCESS写聊天室(八)
2006/10/09 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
php微信公众号开发模式详解
2016/11/28 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
微信小程序实现banner图轮播效果
2020/06/28 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
python搭建简易服务器分析与实现
2012/12/15 Python
在Python中使用列表生成式的教程
2015/04/27 Python
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
2014春晚主持词
2014/03/25 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
青年文明号申报材料
2014/12/23 职场文书
浅谈Python从全局与局部变量到装饰器的相关知识
2021/06/21 Python
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android