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

212 阅读 0 评论 140 点赞

我是靠谱客的博主健康钢笔，最近开发中收集的这篇文章主要介绍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> 