Jquey拖拽控件Draggable使用方法(asp.net环境)

本例主要目的是使用Jquey的Draggable控件。

　　使用时首先依次引用Jquery，Jquery-Ui ，Draggable三个Js。然后在js中编写相应的代码，相关代码说明请看程序中的注释。

　　关于 Draggable的说明请参考：http://docs.jquery.com/UI/API/1.8/Draggable

源码：


代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JqueryDrag._Default" %>
<!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 runat="server">
<title></title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="js/Draggable.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//拖拽方法
$("#imgDrag").draggable({
//拖拽范围
containment: "#DragArea",
//开始事件
start: function(event, ui) {
StartDrag(event, ui);
},
//结束事件
stop: function(event, ui) {
EndDrag(event, ui);
}
})
});
//开始事件方法
function StartDrag(event, ui) {
$("#StartDragInfo").html("开始： 左：" + ui.offset.left + "上：" + ui.offset.top);
}
//结束事件方法
function EndDrag(event, ui) {
$("#EndDragInfo").html("结束： 左：" + ui.offset.left + "上：" + ui.offset.top);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<%--Draggable参考手册http://docs.jquery.com/UI/API/1.8/Draggable--%>
<%--拖动的范围--%>
<div id="DragArea" style="width: 500px; height: 500px; border: 1px solid blue">
<%--记录拖动开始时的信息--%>
<div id="StartDragInfo">
</div>
<%--记录拖动结束时的信息--%>
<div id="EndDragInfo">
</div>
<br />
<br />
<%--被拖动的物体--%>
<img id="imgDrag" src="img/imgGreen.gif" />
</div>
</form>
</body>
</html>

文件打包下载

赞 (0)

相关推荐

  • ASP.NET 5已终结，迎来ASP.NET Core 1.0和.NET Core 1.0

    ASP.NET 5已终结，迎来ASP.NET Core 1.0和.NET Core 1.0

    ASP.NET 在过去的 15 年里是个非常不错的"品牌". ASP.NET 4.6 已经支持在生产环境使用:http://get.asp.net. 但是,命名是新的,完全截取自 ASP.NET 框架 -- "ASP.NET 5",但这并不是个好主意,其中一个原因是:5 > 4.6,这样看起来 ASP.NET 5 比 ASP.NET 4.6 版本号更大,更好,甚至是可以替代 ASP.NET 4.6. 所以修改了名字,选择了一个更好的版本号. 重新引入 ASP.

  • Win 2003中配置ASP.net环境

    Win 2003中配置ASP.net环境

    大家知道,Microsoft为了更好地预防恶意用户和攻击者的攻击,在默认情况下,没有将 IIS6.0 安装到 Windows Server 2003 家族的成员上.而且,当我们最初安装 IIS6.0 时,该服务在高度安全和"锁定"模式下安装.在默认情况下,IIS6.0 只为静态内容提供服务即,诸如 ASP.ASP.NET.在服务器端的包含文件.WebDAV 发布和 FrontPage Server Extensions 功能只有在启用时才工作.在windows 2003 IIS 6.0

  • ASP.NET Core配置教程之读取配置信息

    提到"配置"二字,我想绝大部分.NET开发人员脑海中会立马浮现出两个特殊文件的身影,那就是我们再熟悉不过的app.config和web.config,多年以来我们已经习惯了将结构化的配置信息定义在这两个文件之中.到了.NET Core的时候,很多我们习以为常的东西都发生了改变,其中也包括定义配置的方式.总的来说,新的配置系统显得更加轻量级,并且具有更好的扩展性,其最大的特点就是支持多样化的数据源.我们可以采用内存的变量作为配置的数据源,也可以直接配置定义在持久化的文件甚至数据库中. 由

  • asp.net core实现文件上传功能

    asp.net core实现文件上传功能

    本文实例为大家分享了单文件上传.多文件上传的功能,供大家参考,具体内容如下 单文件上传  上传文件在Web应用程序中是一个常见的功能.在asp.net core中上传文件并保存在服务器上,是很容易的.下面就来演示一下怎么样在 ASP.NET Core项目中进行文件上传.  首先,创建一个 asp.net core 项目,然后在Controller文件件添加一个HomeController,然后在 Views 文件夹的 Home 文件夹里添加一个 New.cshtml 视图文件.如下图: 添加一个

  • Win7旗舰版中的IIS配置asp.net的运行环境配置教程(图文教程+视频)

    Win7旗舰版中的IIS配置asp.net的运行环境配置教程(图文教程+视频)

    以前弄过好多次,都没有成功,昨天晚上不知怎么地就成功了,借用我同学的一句话,这叫"灵光一闪",废话不多说了,这个成功是有图有视频有真相地哈! 这篇博文发表都三个月了,我自认为算是很详细了,可是还是很多人没有配置出来(天天有人在群里问我怎么配置),所以今天特意录成视频供大家参考.特意申明:这是配置asp.net运行坏境,不是asp,asp和asp.net是有区别的.asp.net如果还是配置不出可以问,asp就算了,我不懂asp哦!无法帮你解决. Win7旗舰版中的IIS配置asp.ne

  • win7和win2008 r2下配置IIS7(ASP.net运行环境)

    win7和win2008 r2下配置IIS7(ASP.net运行环境)

    1.先要设置应用程序池(ApplicationPool)为Classic.NETAppPool,而不是默认的DefaultAppPool,可以在网站目录里对每个站点设置,也可以在站点进行单独设置. 控制面板--系统和安全--管理工具--Internet信息服务(IIS)管理器,打开IIS管理器.选中左侧的默认网站,单击右侧的高级设置,将应用程序池设置为Classic.NETAppPool. 2.选中左侧的"应用程序池",选中"Classic.NETAppPool",

  • win2008 r2 服务器环境配置(FTP/ASP/ASP.Net/PHP)

    win2008 r2 服务器环境配置(FTP/ASP/ASP.Net/PHP)

    以下是FTP/ASP/PHP/ASP.Net环境配置 一.FTP与ASP安装流程通过远程登录VPS,点击计算机管理>角色1.1首先我们选择自己需要装的配置环境ASP与FTP,所以只要在前面打勾再安装就可以了 1.2:需要安装的配置,确认安装 1.3:安装完成 二.安装PHP环境2.1首先我们通过在线平台安装PHP所需要的软件配置 2.2进入平台>产品>框架>选择PHP5.3.8与Windows Cache Extension 1.1 for PHP 5.3安装 2.3安装确认 2.

  • Windows Server 2012 R2 Standard搭建ASP.NET Core环境图文教程

    Windows Server 2012 R2 Standard搭建ASP.NET Core环境图文教程

    前言: 随着ASP.NET Core 1.0的发布,论坛里相关的文章也越来越多,正好有时间在测试环境上搭建 ASP.NET Core的发布环境,把过程中遇到的问题写给大家,以便有用到的朋友需要. 环境: Windows Server 2012 R2 Standard with Update MSDN 链接:ed2k://|file|cn_windows_server_2012_r2_with_update_x64_dvd_6052725.iso|5545705472|121EC13B53882E

  • Win7中IIS的ASP.NET环境配置简洁版

    Win7中IIS的ASP.NET环境配置简洁版

    工作中需要在Win7中使用IIS搭建ASP.NET的网站,这里分享下配置中的小问题. siyue最开始自己配了一遍,发现使用IIS运行ASP.NET网站时一直报错,想到自己可能配置的有问题,于是上网找点资料看看. 发现有个朋友对这个进行了详细的设置,非常好的介绍,我这里只是稍微总结下,好让自己记得更清楚. 详细内容传送门:Win7旗舰版中的IIS配置asp.net的运行环境 siyue觉得在Win7上配置IIS,一般的安装IIS和建立网站都没问题,(不过要运行ASP必须在开发工具那里安装ASP.

  • win10下ASP.NET Core部署环境搭建步骤

    win10下ASP.NET Core部署环境搭建步骤

    随着ASP.NET Core 1.0 rtm的发布,网上有许多相关.net core 相关文章,今刚好有时间也在win10环境上搭建下 ASP.NET Core的部署环境,把过程记录下给大家. 1. 开发运行环境 1> Visual Studio 2015 Update 3* 2> .NET Core 1.0 for Visual Studio (包括asp.net core 模板,其中如果机器上没有.net core sdk会默认安装)地址https://go.microsoft.com/f

随机推荐