zoukankan      html  css  js  c++  java
  • 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=" 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>



  • 相关阅读:
    蓝桥杯训练 | 枚举,模拟与排序 | 04
    linux全套 | Linux模板机器安装 | 18
    linux全套 | Shell编程 | 16
    MySQL主从复制延迟解决方案
    MySQL异地备份方案
    MYSQL必知必会-where语句
    MySQL常见面试题-概念题
    入门-MySQL查询语句的45道练习
    20145234黄斐《信息安全系统设计基础》第0周学习总结
    OpenGL代码学习(2)
  • 原文地址:https://www.cnblogs.com/scottckt/p/1837683.html
Copyright © 2011-2022 走看看