<style>
.drag{
overflow:visible;
width:2000px
}
.drag.index{
width:200px;
color:red;
position:absolute;
}
.drag span{
width:200px;
position:relative;
}
</style>
<script>
function scro(){
var index=document.getElementById("dv").firstChild;
index.style.left=parseInt(document.body.scrollLeft);
}
</script>
<body onscroll="scro()">
<div class="drag" id="dv" >
<span class="index" style="left:0">序号</span> <span>其他</span> <span>其他</span> <span>其他</span> <span>其他</span> <span>其他</span> <span>其他</span> <span>其他</span> <span>其他</span>
</div>
</body>
这个主要是别人给说的。然后自己根据意思改造了。
分享到：
相关推荐
制作可拖拽的div是实现用户交互的一种常见方法，常用于创建自定义控件、布局管理或模拟物理对象的移动。 首先，确保引入jQuery库。在HTML文件（如`drage.html`或`test.html`）的`<head>`部分，添加以下代码来引用...
在网页开发中，有时我们需要实现页面元素的可拖动性，例如实现一个可移动的小窗口、拖拽式布局调整等功能。本篇文章将通过一个简单的示例代码来讲解如何利用JavaScript实现`<div>`元素的拖动功能。 #### 二、HTML...
在这个项目"testJquery"中，我们将探讨如何使用jQuery来实现一个可拖动的模态div弹出框。 首先，我们来看`divJQuery`这个文件，它很可能包含了实现模态div弹出框所需的HTML结构和CSS样式。通常，模态div会包含一个...
4. 封装和模块化：为了代码的可维护性，弹出窗口的逻辑可能被封装在一个单独的JavaScript模块或函数中，以便于复用和扩展。 5. 浏览器兼容性：考虑到不同的浏览器可能对某些CSS属性或JavaScript语法有不同的支持程度...
此外，可能还需要一个包含图片的容器元素，如`<div>`，以便进行拖动和缩放操作。 `index.css`是CSS样式表，用于定义页面布局和元素样式。在这个案例中，可能包括了图片容器的宽高、定位以及拖动和缩放时的过渡效果...
IE浏览器有一个特有的`setCapture`方法，可以捕获后续的鼠标事件，这在拖动操作中很有用，因为它可以防止鼠标在拖动过程中离开元素时事件丢失。如果浏览器支持`setCapture`方法，就会使用这个方法来确保鼠标事件...
5. zDrag.js：可能是一个拖动功能的实现，用于使弹出窗体可拖动，提高交互性。 6. images：这个文件夹可能包含了对话框中使用的图像资源，如图标、背景等，是界面美观的重要组成部分。 基于这些信息，我们可以深入...
7. 代码示例：文档中给出了一个代码示例，该示例中创建了一个id为“test”的div元素，并为其设置了边框、宽度和背景色。通过JavaScript代码实现了该元素的拖拽功能。 上述描述的拖拽实现仅涉及基础的JavaScript操作...
`<div>`是HTML中的一个块级元素，常用于组织页面布局，而CSS3则引入了许多增强用户体验的新特性，如变换（transform）、过渡（transition）和动画（animation）。 首先，我们需要了解CSS3的`transform`属性，它可以...
- `test拖拽.html`：这可能是一个测试页面，用于展示拖拽功能的实现。 - `jquery.easyui.min.js`：EasyUI是基于jQuery的一个前端框架，提供了丰富的组件和UI效果，如表格、对话框、菜单等，但它不直接包含拖拽功能，...
首先，我们需要在HTML模板中定义一个可拖动的布局。从给定的部分内容来看，布局包含四个li元素：左侧元素(left)、拖动控制器(resize)、中间元素(mid)和右侧元素(right)。拖动控制器是用户与界面交互的部分，用于调整...
例如，创建一组类名为`tab`的容器，每个容器内包含一个`tab-content`，初始时只显示第一个，其余隐藏。当用户点击不同标签时，通过改变`display`属性来切换显示的内容。 在VB.NET环境中，虽然不直接处理前端的拖放...
"JQuery 随意拖动的层"是一个利用jQuery实现的功能，允许用户在网页上自由拖动一个层（div元素）以提供更直观的交互体验。这个功能通常用于创建可拖动的对话框、窗口或任何其他需要移动的界面元素。 首先，我们需要...
为了实现拖拽功能，我们可以创建一个名为`v-drag`的自定义指令。首先，我们需要监听`mousedown`事件以开始拖动，然后在`mousemove`事件中更新元素的位置，最后在`mouseup`事件中停止拖动。同时，我们需要考虑浏览器...
- <div id="test">可能是一个用于演示效果的测试div。 - 创建了按钮，用于触发JavaScript事件。 6. 脚本和外部库引用：描述中提到了引入外部JavaScript库的情况，这在处理老旧浏览器兼容性时很常见。由于某些老旧...
接下来，我们创建一个名为`dragDrop.js`的JavaScript文件，实现拖动和交换内容的功能。首先，我们需要为每个需要拖动的元素添加事件监听器，这些事件包括`mousedown`、`mousemove`和`mouseup`： ```javascript ...
【标题】：“百度地图test”通常指的是一个关于使用百度地图API进行开发的示例或教程。这个项目可能涉及如何在网页中集成百度地图，实现地图显示、定位、标注、路线规划等功能。 【描述】：虽然描述是“NULL”，但...
本文将详细讲解如何创建一个可拖动且兼容各大浏览器的 JavaScript 弹出层，并探讨相关技术要点。 首先，为了实现弹出层的拖动功能，我们需要监听鼠标事件。当用户点击弹出层标题区域时，记录下初始鼠标位置和当前...
在给出的代码示例中，`<div class="drag-container">`是图片的容器，它有一个内部的`<div class="drag-image-box">`，用于包含图片。通过设置`draggable="false"`，我们可以防止图片被拖放，因为默认情况下，图片...
div#test{border:solid 1px blue;background:red;position:absolute;left:100px;top:200px;width:200px;height:200px;cursor:pointer;} 拖我拖我拖我拖我拖我拖我拖我 [Ctrl+A 全选 注:如需引入外部Js需刷新...