页面中拖拽效果的实现

这段代码展示了如何使用JavaScript创建一个DOM元素的拖放功能。通过Drag.init方法初始化拖拽行为,设置拖动范围限制,并处理拖动过程中的鼠标移动和释放事件,实现了元素在页面上的自由拖动。
摘要由CSDN通过智能技术生成
可拖放DOM模式(Draggable DOM pattern)可以让用户在Web页面中对各个部分进行编辑,即只需要选中要移动的部分,将其拖拽到新的位置上,就可以重新安排整个页面的布局效果,下面介绍一下具体的实现方式。
在Eclipse中新建一个项目,项目的名称为“P45_DropDrag”。首先,新建一个HTML文档,页面名称为“main.html”。 该页面实现的效果如图4-6所示。当用户使用鼠标选中对应的方框时,就可以通过拖拽调整其在页面中的位置。
4-6  拖拽效果
本例中所使用的HTML文档的源代码如下所示。注意在本页面中调用了一个开源框架中有关定位的JavaScript脚本文件,读者可以参考本书配套光盘中的源代码。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
    <HEAD>
           <title>Main</title>
           <script language="javascript" src="dom-drag.js"></script>
           <link rel="stylesheet" href="style.css">    
    </HEAD>
    <body>
           <form id="Form1" method="post" runat="server">
                <div id="news_root" style="LEFT:20px; TOP:20px" class="
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值