JQUERY实现控件拖动并保持位置：自定义功能

3星 · 超过75%的资源需积分: 3 53 浏览量更新于2024-09-14 收藏 5KB TXT 举报

在JQUERY控件拖动保持位置的场景中，本文档主要介绍了如何使用JavaScript库JQUERY（版本1.7.2）实现网页中控件的动态拖动功能，并且允许用户自定义控件的位置。首先，页面使用了ASP.NET的服务器端脚本语言C#，并在MoveControl.aspx.cs文件中处理后端逻辑。HTML部分采用了XHTML1.0标准，使用DOCTYPE声明确保浏览器兼容性。在页面布局方面，设置了固定的头部(#hd)和底部(#ft)区域，主要内容区域设为一个宽度为1000px的中间容器(#mn)，其中包含了一个draggable区域，其样式定义为宽高自适应、背景色为灰色，以便于放置拖动元素。为了实现拖动功能，开发者使用了CSS的cursor属性设置为move，让元素看起来可以被移动。 JQUERY的核心部分在于JavaScript代码，通过`.draggable`类选择器选中可拖动的元素，设置其position属性为absolute，使其相对于文档定位，同时设置cursor样式和限制最大宽度为1000px。为了让用户可以通过鼠标边角进行水平或垂直方向的调整，创建了隐藏的`.dragb`元素作为边界提示，它显示在右下角，当鼠标悬停在其上时，cursor样式变为se-resize，表明可以进行尺寸调整。值得注意的是，`.draggable`区域内的元素还包含了`.hv`类，这可能表示当元素被拖动时，会有特定的行为，例如当元素处于水平和垂直方向的调整模式时，背景颜色会改变，或者有特殊的效果提示。这部分代码中的`border:1px dashed`可能是用来区分不同模式的视觉标志。此外，文档还引用了`jquery-1.7.2.min.js`，这是JQUERY库的核心文件，提供了丰富的DOM操作和事件处理功能，为拖动功能的实现提供了基础支持。总结来说，这个文档展示了如何利用JQUERY来实现网页中控件的拖动功能，并且允许用户控制元素的移动和大小。通过CSS和JQUERY的结合，可以创建出交互性强且灵活的用户界面，提升用户体验。开发者可以根据需求自定义拖动行为和样式，从而满足各种业务场景的需求。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MoveControl.aspx.cs" Inherits="WebApplicationTest1.MoveControl" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<style type="text/css">
body,dl,dd,ul,li,h3{ margin:0; padding:0;}
body{ background:#f0f0f0; font:12px/150% verdana;}
#hd{ height:100px; background:gray;}
#ft{ height:30px;}
#mn{ width:1000px; margin:auto;}
.draggable{ width:1000px; height:1480px;}
.drag{cursor:move; line-height:200%; padding:0 10px;position:absolute; width:auto;/*white-space:nowrap;*/max-width:1000px;}
.drag b{border-right:1px solid red;border-bottom:1px solid red; width:5px; height:5px; line-height:5px; position:absolute; right:0; bottom:0; cursor:se-resize; display:none;}
.drag.hv{ background:#ffc;/*border:1px dashed #999;*/}
.drag.hv b{ display:block;}
.drag.down{ background:#ccc;}

#d1{ top:278px;
left:312px;
}
#d2{ top:412px;
left:312px;
}
#d3{ top:473px;
left:315px;
}

剩余5页未读，继续阅读

tempking

粉丝: 0

JQUERY实现控件拖动并保持位置：自定义功能

自定义jquery控件：动态调整与移动表格列

掌握jQuery实现表格控件拖拽技巧

12款多功能jQuery网页控件精粹

jquery可拖拽控件

jQuery 获得控件的坐标位置

可调节列宽度及列位置的jquery控件

jquery 可拖拽的窗体控件实现代码

jquery树状控件(可拖拽)

jQuery树控件的拖动修改各种特效

superDrag.js:一个jQuery控件，为页面DOM元素提供丰富而强大的拖拽功能

最新资源