关于利用jQuery插件实现盒子的拖拽

最新推荐文章于 2024-06-18 09:47:12 发布

Lurkers.

最新推荐文章于 2024-06-18 09:47:12 发布

阅读量990

点赞数

分类专栏： jQuery Ajax

本文链接：https://blog.csdn.net/this_name_true/article/details/82496772

版权

该博客介绍了如何使用jQuery创建一个插件，实现盒子元素的拖拽功能。通过分析插件代码，详细讲解了拖动逻辑，包括计算盒子移动偏移、限制可移动范围以及在鼠标点击离开后停止拖拽的机制。示例代码展示了如何应用和自定义盒子颜色。

摘要由CSDN通过智能技术生成

首先，先写一个盒子。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>拖拽盒子</title>
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
		<script type="text/javascript" src="js/dragDiv.js" ></script>
		<style>
			*{
				margin: 0px;
			}
			#box{
				position: absolute;
				width: 150px;
				height: 150px;
				text-align: center;
				line-height: 150px;
				background: indianred;
				border-radius: 10px;
			}
		</style>
	</head>
	<body>
		<div id="box">拖动</div>

盒子完成后就可以写插件了。---------------------

插件代码如下：

;(function($){
	$.fn.dragDiv=function(options){
//		alert

最低0.47元/天解锁文章

Lurkers.

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
关于利用jQuery插件实现盒子的拖拽

首先，先写一个盒子。&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;拖拽盒子&lt;/title&gt; &lt;script type="text/javascript" src="js/jquery-1
复制链接

扫一扫

专栏目录