脚本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
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
javascript 表格排序和表头浮动效果(扩展SortTable)
前段时间一个项目有大量页面用到表格排序和表头浮动的效果，在网上找了几个表格排序的js代码，最后选择了 Stuart Langridge的SortTable,在SortTable基础上做了些扩展，加上了表头浮动效果及一些小功能。2009-04-04
bootstrap中使用google prettify让代码高亮的方法
使用google prettify 让代码高亮非常漂亮，接下来通过本文给大家介绍bootstrap中使用google prettify让代码高亮的方法，感兴趣的朋友一起看看吧2016-10-10
这篇文章主要介绍了js获取对象的属性值两种方式,在JavaScript中访问对象的属性值可以通过点运算符（.）或括号运算符（[]）两种方式,文中将两种方式的代码介绍的非常详细,需要的朋友可以参考下2024-10-10
这篇文章主要为大家详细介绍了Bootstrap php制作动态分页标签的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
ES6 Promise基础用法(resolve、reject、then、catch,a
Promise是JavaScript中处理异步操作的对象,它有三种状态：Pending、Fulfilled、Rejected,使用new Promise创建Promise对象,通过resolve和reject改变状态,then和catch方法用于处理成功和失败的结果,本文介绍ES6 Promise用法,感兴趣的朋友一起看看吧2024-09-09
BootStrap+Mybatis框架下实现表单提交数据重复验证
这篇文章主要介绍了BootStrap+Mybatis框架下实现表单提交数据重复验证功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
这篇文章主要为大家详细介绍了纯js实现图片匀速淡入淡出效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要为大家详细介绍了JS自定义滚动条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
这篇文章主要介绍了在线所见即所得HTML编辑器的实现原理浅析,本文用初始化、打开编辑功能、获取编辑器的内容、增加样式设置、再进一步等步骤阐述在线编辑器的基本实现原理,需要的朋友可以参考下2015-04-04
这篇文章主要是对如何通过javascript操作web控件的自定义属性进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所 帮助2013-11-11
最新评论