Jquey拖拽控件Draggable用法

　　本例主要目的是使用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 >