脚本div实现拖放功能(两种)
更新时间：2017年02月13日 16:58:00 作者：sumer7310
本文介绍了脚本div实现拖放功能的两种方法：1.原生拖放实现；2.jQuery UI draggable实现拖放。具有很好的参考价值，下面跟着小编一起来看下吧
网页上有很多拖曳的操作，比如拖动树状列表，可拖曳的图片等。
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
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了uniapp实现日期时间选择器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
近，在客户端解吸xml时候，需要将XML转化成字符串，看了很多文章，介绍的最多的是将XML字符串转化成对象2011-12-12
今天小编就为大家分享一篇浅谈layui分页控件field参数接收对象的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了JavaScript实现简易QQ聊天界面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
轮播图是我们日常开发中经常会遇到的一个需求,下面这篇文章主要给大家介绍了关于微信小程序滚动、轮播图和文本的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
picker为用户提供了多个选择,用户选了其中一种,但仍是需要有东西去告诉后台用户选了什么,下面这篇文章主要给大家介绍了关于微信小程序picker选择器获取值的2种方法,需要的朋友可以参考下2023-03-03
本文是写在2011年，主要介绍 “Firefox” 浏览器插件 “Firebug” 的操作，如今主流浏览器对控制台都已经提供了很好的支持。我自己用的最多是谷歌的 “chrome” 浏览器，下面也用 “chrome” 浏览器来调试。2015-06-06
这篇文章主要介绍了javascript针对cookie的基本操作,结合实例形式较为详细的分析了JavaScript操作cookie的基本技巧,并给出了一个JavaScript操作cookie的完整类,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
npm script和package-lock.json使用示例详解
这篇文章主要为大家介绍了npm script和package-lock.json使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
使用indexOf取得？之后的参数，以&使split进行分割成数组，下面展示了一个从url上获取名为MenuCode参数的过程2014-09-09
最新评论