1. 页面中的部分:
<div id="div1" onmousedown="m(this.id)" style="display:none;left: 0px;top: 0px; position: absolute; left: 150px; top: 2500px;">
<table width="50%" border="0" cellpadding="3" cellspacing="1"
style="background: #ff7300;
position:static;filter:progid:DXImageTransform.Microsoft.DropShadow
(color=#666666,offX=4,offY=4,positives=true)" align="center">
<tr style="cursor: move;">
<td><font color="#FFFFFF">往尚空间提示:</font></td>
<td align="right"><input type="button" value="x"
onClick="javascript:closeMsgDiag();" style="cursor:pointer;"></td>
</tr>
<tr>
<td colspan="2" width="100%" bgcolor="#FFFFFF" height="150"
align="middle">中国asp之家<br /><br />网址:<a href="http://www.aspxhome.com">http://www.aspxhome.com</a></td>
</tr>
</table>
</div>
2. CSS样式的部分:
#div1 {
display: none;
position: absolute;
height: 100%;
width: 100%;
padding-top: 10%;
z-index: 1001;
}
3. JS部分:
function openMsgDiag(){
document.getElementById('div1').style.display = "inline";
}
function closeMsgDiag(){
document.getElementById('div1').style.display = "none";
}
//定义移动对象和移动坐标
var Mouse_Obj="none",_x,_y;
//拖动对象函数(自动)
document.onmousemove=function()
{
if(Mouse_Obj!=="none")
{
document.getElementById(Mouse_Obj).style.left=_x+event.x;
document.getElementById(Mouse_Obj).style.top=_y+event.y;
event.returnValue=false;
}
}
//停止拖动函数(自动)
document.onmouseup=function()
{
Mouse_Obj="none";
}
//确定被拖动对象函数 o为被拖动对象
function m(o)
{
Mouse_Obj=o;
_x=parseInt(document.getElementById(Mouse_Obj).style.left)-event.x;
_y=parseInt(document.getElementById(Mouse_Obj).style.top)-event.y;
}
二、用AJAX实现的可拖动的div框(下面有个AJAX弹出提示信息效果.rar)
分享到:
相关推荐
以上就是利用Ajax实现div拖拽功能的基本原理和实现步骤。这个功能在许多交互式的Web应用中都很常见,例如在线编辑器、日历应用、画板等。通过Ajax,我们可以将用户的操作实时同步到服务器,提供更流畅的用户体验。
本资源涉及的是一个基于jQuery(JQ)、JavaScript(JS)和layui框架的UI组件,特别关注的是元素(尤其是div)的拖动功能。拖动插件是一种常见且实用的增强交互性的工具,它允许用户通过鼠标操作移动页面上的元素,...
本示例涉及的主题是“js控制多个div拖拽和拖动、且能保存数据至cookie、数据库、xml”,这是一项实用技术,尤其适用于创建交互性强的Web 2.0应用程序。下面将详细介绍这一主题的相关知识点。 首先,让我们了解...
《jQuery实现鼠标拖动div排序技术详解》 在网页开发中,用户交互体验是至关重要的。其中,元素的可拖动排序功能可以让用户更加直观地调整界面布局,提高使用便捷性。本文将深入探讨如何利用jQuery库实现鼠标上下...
本教程将详细讲解如何利用jQuery实现一个div元素的拖动排序效果,结合CSS样式,创建出一款从左到右慢慢展开且可自由拖动排序的特效。 首先,我们需要在HTML中设置好基础结构。创建一系列的div元素,每个div代表一个...
总的来说,实现"可拖动div层,兼容IE火狐等浏览器"涉及到HTML、CSS和JavaScript的综合应用,尤其是jQuery的使用,可以高效地创建出用户友好的交互体验。通过学习和理解这些文件,你可以掌握如何在自己的项目中创建...
总结来说,通过JavaScript和CSS,我们可以创建一个可拖动的div窗口,并通过Ajax保存用户的自定义窗口位置。这个过程涉及到HTML结构的搭建、CSS样式的设定、JavaScript事件监听及Ajax通信等多个方面,体现了Web开发中...
本下载包包括了3个js拖动特效,拖动DIV移动指定位置,一个实例是任意位置的拖动,不受限制,想拖动到哪里就拖动到哪里;另一个是指定位置的拖动,由左侧拖动到右侧指定位置,拖动结束后,左侧会少一个DIV,右侧新增...
总之,通过利用jQuery UI库中的Resizable和Draggable插件,我们可以轻松地实现在Web页面上拖动div的四个角来改变其大小的功能,同时也能方便地拖动div在限制范围内移动,极大地增强了用户的交互体验。
综上所述,这个压缩包中的"AJAX可以拖动的DIV块.htm"很可能是演示如何使用JavaScript和AJAX技术创建一个可拖动的DIV元素。实现过程中涉及了JavaScript事件处理、DOM操作、AJAX请求以及可能的服务器交互。通过学习这...
总的来说,C#实现`div`拖放功能涉及到前端的JavaScript/jQuery代码和后端的C#处理。前端负责监听和处理拖放事件,更新元素位置;后端则接收和处理位置信息,保存用户设置。这样的交互设计为Web应用程序带来了更高的...
总之,理解并掌握如何使用jQuery创建可拖动div对于前端开发者来说是一项基础但重要的技能。这不仅可以提升用户体验,也是构建复杂Web应用时必不可少的一部分。在实际项目中,可以根据具体需求调整代码,实现更加灵活...
本篇文章将深入探讨如何使用 jQuery Sortable 实现div的拖动排序效果。 首先,你需要在项目中引入 jQuery 和 jQuery UI 的库。jQuery 是一个广泛使用的JavaScript库,而 jQuery UI 提供了包括Sortable在内的多种...
本项目“jQuery可拖拽DIV页面”利用jQuery及其扩展插件jQuery UI,实现了一个用户界面元素(如div)可以被拖动的功能,从而为用户提供更直观的交互体验。以下是对这个知识点的详细讲解: 1. **jQuery基础**:jQuery...
一个兼容性非常好的Js网页DIV模块拖动代码,就JavaScript结合PHP实现的网页DIV模块拖动特效,以ajax方式拖动,先前可见于博客的管理后台,用于管理自己网站的模块排序。本拖动特效结合PHP程序,实现了拖动模块位置的...
在IT行业中,jQuery是一个非常流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。本资源"jquery鼠标拖动层DIV源代码精简整理版"提供了一个轻量级的解决方案,用于实现HTML元素(特别...
总的来说,"Ajax拖动,拖拽,随意的布局页面"项目结合了Ajax、JavaScript、CSS和HTML等技术,实现了动态的、用户可自定义的页面布局,让用户能够像在桌面环境中一样自由移动和排列网页元素,大大增强了网页的交互性和...
var newDiv = $("<div id='newDraggable' class='ui-widget-content'>这是新添加的可拖动div。</p></div>"); $("#container").append(newDiv); newDiv.draggable(); }); ``` 在上述代码中,`#addDivButton`是...