`

JS特效(可拖动的div框)和用AJAX实现的可拖动的div框

阅读更多
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拖拽

    以上就是利用Ajax实现div拖拽功能的基本原理和实现步骤。这个功能在许多交互式的Web应用中都很常见,例如在线编辑器、日历应用、画板等。通过Ajax,我们可以将用户的操作实时同步到服务器,提供更流畅的用户体验。

    JQ JS javascript layui UI组件 元素 div 拖动插件

    本资源涉及的是一个基于jQuery(JQ)、JavaScript(JS)和layui框架的UI组件,特别关注的是元素(尤其是div)的拖动功能。拖动插件是一种常见且实用的增强交互性的工具,它允许用户通过鼠标操作移动页面上的元素,...

    js控制多个div拖拽和拖动、且能保存数据至cookie、数据库、xml

    本示例涉及的主题是“js控制多个div拖拽和拖动、且能保存数据至cookie、数据库、xml”,这是一项实用技术,尤其适用于创建交互性强的Web 2.0应用程序。下面将详细介绍这一主题的相关知识点。 首先,让我们了解...

    jQuery鼠标上下拖动div排序代码

    《jQuery实现鼠标拖动div排序技术详解》 在网页开发中,用户交互体验是至关重要的。其中,元素的可拖动排序功能可以让用户更加直观地调整界面布局,提高使用便捷性。本文将深入探讨如何利用jQuery库实现鼠标上下...

    jquery div拖动排序效果代码.zip

    本教程将详细讲解如何利用jQuery实现一个div元素的拖动排序效果,结合CSS样式,创建出一款从左到右慢慢展开且可自由拖动排序的特效。 首先,我们需要在HTML中设置好基础结构。创建一系列的div元素,每个div代表一个...

    可拖动div层,兼容IE火狐等浏览器

    总的来说,实现"可拖动div层,兼容IE火狐等浏览器"涉及到HTML、CSS和JavaScript的综合应用,尤其是jQuery的使用,可以高效地创建出用户友好的交互体验。通过学习和理解这些文件,你可以掌握如何在自己的项目中创建...

    js加div 窗口拖动实现

    总结来说,通过JavaScript和CSS,我们可以创建一个可拖动的div窗口,并通过Ajax保存用户的自定义窗口位置。这个过程涉及到HTML结构的搭建、CSS样式的设定、JavaScript事件监听及Ajax通信等多个方面,体现了Web开发中...

    3个js拖动DIV移动位置的特效代码.rar

    本下载包包括了3个js拖动特效,拖动DIV移动指定位置,一个实例是任意位置的拖动,不受限制,想拖动到哪里就拖动到哪里;另一个是指定位置的拖动,由左侧拖动到右侧指定位置,拖动结束后,左侧会少一个DIV,右侧新增...

    拖动div的四个拐角改变其大小

    总之,通过利用jQuery UI库中的Resizable和Draggable插件,我们可以轻松地实现在Web页面上拖动div的四个角来改变其大小的功能,同时也能方便地拖动div在限制范围内移动,极大地增强了用户的交互体验。

    AJAX可以拖动的DIV块.rar

    综上所述,这个压缩包中的"AJAX可以拖动的DIV块.htm"很可能是演示如何使用JavaScript和AJAX技术创建一个可拖动的DIV元素。实现过程中涉及了JavaScript事件处理、DOM操作、AJAX请求以及可能的服务器交互。通过学习这...

    C#实现div拖拽

    总的来说,C#实现`div`拖放功能涉及到前端的JavaScript/jQuery代码和后端的C#处理。前端负责监听和处理拖放事件,更新元素位置;后端则接收和处理位置信息,保存用户设置。这样的交互设计为Web应用程序带来了更高的...

    基于jQuery可拖动的div,Demo

    总之,理解并掌握如何使用jQuery创建可拖动div对于前端开发者来说是一项基础但重要的技能。这不仅可以提升用户体验,也是构建复杂Web应用时必不可少的一部分。在实际项目中,可以根据具体需求调整代码,实现更加灵活...

    Jquery Sortable实现div拖动排序效果

    本篇文章将深入探讨如何使用 jQuery Sortable 实现div的拖动排序效果。 首先,你需要在项目中引入 jQuery 和 jQuery UI 的库。jQuery 是一个广泛使用的JavaScript库,而 jQuery UI 提供了包括Sortable在内的多种...

    jQuery可拖拽DIV页面

    本项目“jQuery可拖拽DIV页面”利用jQuery及其扩展插件jQuery UI,实现了一个用户界面元素(如div)可以被拖动的功能,从而为用户提供更直观的交互体验。以下是对这个知识点的详细讲解: 1. **jQuery基础**:jQuery...

    兼容性非常好的Js网页DIV模块拖动代码.rar

    一个兼容性非常好的Js网页DIV模块拖动代码,就JavaScript结合PHP实现的网页DIV模块拖动特效,以ajax方式拖动,先前可见于博客的管理后台,用于管理自己网站的模块排序。本拖动特效结合PHP程序,实现了拖动模块位置的...

    jquery鼠标拖动层DIV源代码精简整理版

    在IT行业中,jQuery是一个非常流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。本资源"jquery鼠标拖动层DIV源代码精简整理版"提供了一个轻量级的解决方案,用于实现HTML元素(特别...

    Ajax拖动,拖拽,随意的布局页面

    总的来说,"Ajax拖动,拖拽,随意的布局页面"项目结合了Ajax、JavaScript、CSS和HTML等技术,实现了动态的、用户可自定义的页面布局,让用户能够像在桌面环境中一样自由移动和排列网页元素,大大增强了网页的交互性和...

    jquery 拖拽动态添加div 保存拖拽后的效果

    var newDiv = $("&lt;div id='newDraggable' class='ui-widget-content'&gt;这是新添加的可拖动div。&lt;/p&gt;&lt;/div&gt;"); $("#container").append(newDiv); newDiv.draggable(); }); ``` 在上述代码中,`#addDivButton`是...

Global site tag (gtag.js) - Google Analytics