JavaScript实现控件位置动态跟踪与存储

4星 · 超过85%的资源需积分: 10 121 浏览量更新于2024-09-14 收藏 14KB TXT 举报

在本篇关于"JS页面控件位置移动并保存坐标位置"的文章中，作者探讨了如何使用JavaScript来动态管理Web页面上的控件位置，并能够记录和保存这些控件的位置信息。主要涉及以下几个关键知识点： 1. **JavaScript事件处理**：首先，文档通过`onselectstart`属性防止用户选中文本导致元素拖动，确保控制的精确性。 2. **变量声明**：定义了几个全局变量，如`l`, `t`, `flag`, `moveobj`, `picW`, `picH`, 和 `headH`，分别用于存储鼠标点击位置、当前选中的控件、是否处于拖动状态、当前被选中的对象以及图片和容器的高度和宽度。 3. **函数`divdown`**：当用户点击控件时，这个函数会被触发。它首先检查是否有正在拖动的元素，如果没有，则将当前选中的元素设置为`moveobj`并将其层级提升。然后，计算鼠标点击位置相对于元素的偏移量(`l`和`t`)，同时获取图片和容器的尺寸。 4. **控件位置的移动**：在拖拽过程中，如果`flag`为`true`，表示正处于拖动状态，通过修改`moveobj.style.left`和`moveobj.style.top`来改变控件的绝对位置。 5. **坐标信息的保存**：虽然文章没有明确提到如何保存这些坐标，但可以推测作者可能打算在适当的时候将`l`和`t`值存储到数据库或本地存储（如localStorage）中，以便在需要时恢复控件的原始位置。 6. **HTML结构**：页面使用ASP.NET服务器端控件注册，包括`listToolbarModule.ascx`和`formToolbarModule.ascx`，这些可能是用户自定义的UI组件，与控件位置管理有交互作用。 7. **页面布局**：页面的HTML结构包含了`imgMap`和`palContain`元素，这可能是地图和包含控件的父容器，用于定位和移动操作。本文主要讲解了如何使用JavaScript实现页面控件的动态拖拽功能，并涉及到控件位置的计算、保存以及与特定HTML结构的交互。这是一项实用的技术，特别是在需要动态布局或响应用户交互的Web应用中。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MAPREG.aspx.cs" Inherits="HyiSoft.WebSite.ZS.Contract.MAPREG" %>

<%@ Register Src="~/UserControls/listToolbarModule.ascx" TagName="listToolbarModule"
TagPrefix="uc1" %>
<%@ Register Src="../../UserControls/formToolbarModule.ascx" TagName="formToolbarModule"
TagPrefix="uc2" %>
<!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 id="Head1" runat="server">
<title>招商平面图</title>
<script language="JavaScript" type="text/javascript">
<!--

document.onselectstart = function () { return false };
var l;
var t;
var flag;

var moveobj;

var picW; //图片宽
var picH; //图片高
var headH; //图片上端的TOP

//鼠标按下
function divdown(obj) {

flag = true;
if (moveobj == null) {

剩余12页未读，继续阅读

tempking

粉丝: 0
资源: 6

JavaScript实现控件位置动态跟踪与存储

MZGantt甘特图插件（原生js插件）

MZGantt甘特图插件使用实例

jquery 甘特图

c# asp.net 鼠标 控制 设置 控件 css 样式 坐标 注册表 保存 读取 坐标 值 打印 页面 局域网 查找

jQuery 获得控件的坐标位置

动画坐标控件的指定位置开始动画

OpenLayers3实现鼠标移动显示坐标

jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标

微信小程序实现可长按移动控件

js可拖放任意控件

最新资源

c# asp.net 鼠标控制设置控件 css 样式坐标注册表保存读取坐标值打印页面局域网查找