在Asp.net中利用Ajax实现拖放（1）

 

在桌面程序中，你可能经常把一个文件夹移动到另一个文件夹中，你也许会想，如果web应用程序也能实现这种效果，那该多酷啊！现在，我来告诉你，借助于ASP.NET AJAX，我们能很轻松的实现这种效果，下面就让我们一起看看吧！

 在Asp.Net Futures包中包含着拖放引擎，他可以为web页面的DOM元素增加拖放功能。大多数书上的教程都以购物车为例子，俺也不例外了！！

   要想使用拖放引擎，首先需要在页面中启用拖放引擎，与拖放有关的两个js文件：PreviewScript.js和PreviewDragDrop.js，都作为Web资源嵌在Microsoft.Web.Preview.dll程序集中了，所以在使用之前，你必须先添加对Microsoft.Web.Preview.dll程序集的引用，然后，在你的页面中添加如下代码：

 <asp:ScriptManager ID="ScriptManager1" runat="server">

      <Scripts>

        <asp:ScriptReference Assembly ="Microsoft.Web.Preview" Name ="PreviewScript.js" />

        <asp:ScriptReference Assembly ="Microsoft.Web.Preview" Name ="PreviewDragDrop.js" />       </Scripts>

 </asp:ScriptManager>

PreviewScript.js文件包含了使用ASP.NET Futures包的特性所需的基本组件。PreviewDragDrop.js文件是一个脚本文件，其中包含了拖放引擎的组件。在对这些进行配置好了之后，你就可以开始编写代码了。

 要完成一个拖放操作，你至少需要一个可拖动项和一个投放目标。在web应用程序中，他们都是DOM元素。

 投放目标所做的第一件事情就是向DragDropManager注册。这是通过调用DragDropManager实例的registerDropTarget方法做到的。通过调用注册方法，投放目标就是在告诉DragDropManager：必须将有关联的元素投放到一个合法的区域。

 如果开始拖放时，可拖动项调用DragDropManager的startDragDrop方法，指示一个拖动操作已经开始了。

 当DragDropManager识别出拖放中涉及的可拖动项的投放目标时，它打开一个通信通道与它们进行通信。

 为了从DragDropManager接受反馈，可拖动项必须实现Sys.Preview.UI.IDragSource接口。投放目标必须实现Sys.Preview.UI.IDropTarget接口。

其中Sys.Preview.UI.IDragSource接口中定义的方法：

Sys.Preview.UI.IDropTarget接口中定义的方法：

好了，基本知识已经说的差不多了，还是来看一个例子吧！

我们将创建一个客户端控件，其关联元素可以在页面上拖动，这个控件名称为goods，他表示可购买的商品。我们还将创建一个客户端控件container，他表示可以容纳商品的盒子，这是不是跟我们在商场中买东西的购物车很像呢？还是先来看一下做效果图吧！

 

废话少说，下面就让我们一步步实现吧！

1.       新建一个网站，命名为DragDemo，在网站中新建三个文件夹，分别为：Images，JS，Style，分别用来存放图片，js文件和css文件。

2.       在Bin中添加对Microsoft.Web.Preview.dll文件的引用（千万别忘了，这是实现拖放的核心，没有了他怎么行呢？）

3.       新建一个Default.aspx页面，在ScriptManager中加入如下引用

      <asp:ScriptManager ID="ScriptManager1" runat="server">

       <Scripts>

        <asp:ScriptReference Assembly ="Microsoft.Web.Preview" Name ="PreviewScript.js" />

        <asp:ScriptReference Assembly ="Microsoft.Web.Preview" Name ="PreviewDragDrop.js" />

        <asp:ScriptReference Path ="~/JS/DragBehavior.js" />

        <asp:ScriptReference Path="~/JS/Init.js" />

        <asp:ScriptReference Path ="~/JS/container.js" />

      </Scripts>

</asp:ScriptManager>

在上面，Init.js,container.js,DragBehavior.js是我们自定义的js文件

 页面布局如下

<div>

        <h2>购买商品——拖动小图片到盒子中</h2>

   <hr />

      <img alt ="" src="Images/d981954d0099ff2dfb0f0c6ed3a6ade8.jpg" id="img1" class ="itemPic" style="top :100px; left :40px;"/>

      <img alt ="" src="Images/e080d17d0b0901cadb6ed6eea24b0fbd.jpg" id="img2" class ="itemPic"style="top :100px; left :160px;"/>

      <img alt ="" src="Images/e7984d2f5d868bc719faa92a39c3c83b.jpg" id="img3" class ="itemPic"style="top :100px; left :280px;"/>

      <img alt ="" src="Images/e7a36dd12dff84fa2e1025aba2beb3aa.jpg"id="img4" class ="itemPic" style="top :100px; left :400px;"/>

      <img alt ="" src="Images/e868e6e15c2e76116b610bed735b6d0e.jpg"id="img5" class ="itemPic" style="top :100px; left :520px;"/>

      <img alt ="" src="Images/ea3c3201c9c188dd102cdbeeb0befa6d.jpg" id="img6" class ="itemPic" style="top :100px; left :640px;"/>

    <div id="container"></div>

</div>

上面的图片你可以在Images文件夹中找到，下面我们就开始来实现itemPic的代码

4.        在style文件夹中添加一个名为Drag.css的文件，文件代码如下

 .itemPic

{

 width:70px;

 height:70px;

 cursor :move ;

 position:absolute;   /*注意这里的position的值必须设成position*/

     }   

#container

{

 border:solid 5px #cdaebc;

 width:460px;

 height:230px;   

 position : absolute;

 top :220px;

 left :50px;

}

注意：必须将position设成absolute，不然拖动后总是会返回原位置，我在看书的时候，费了半天的劲才找出来，郁闷？别忘了在Default.aspx中加入对css文件的引用。

5.        下面我们就来编写实现拖放的两个核心文件DragBehavior.js,container.js

 DragBehavior.js文件代码如下：

 

Code
 /**////// <reference name="MicrosoftAjax.js"/>
Type.registerNamespace('Demo');

Demo.goods = function(element) {
   Demo.goods.initializeBase(this, [element]);
   
   this._goodsPrice = null;//保持商品价格                                                  
   this._dragStartLocation = null;//保持元素位置                                       
}
Demo.goods.prototype = {
    initialize : function() {
        Demo.goods.callBaseMethod(this, 'initialize');
        
        $addHandlers(this.get_element(),                          
            {mousedown:this._onMouseDown}, this);               
    },
    
    dispose : function() {
        $clearHandlers(this.get_element());
        Demo.goods.callBaseMethod(this, 'dispose');
    },
    
    _onMouseDown : function(evt) {                                
        window._event = evt;                                      
        evt.preventDefault();                                     
                                                                  
        Sys.Preview.UI.DragDropManager.startDragDrop(this,        
            this.get_element(), null);                                      
    },
    
    get_dragDataType : function() {                                  
        return '__goods';//返回与拖放操作相关联的类型，这样容器如果判断类型相同，就允许放入                                         
    },

    getDragData : function(context) {
        return this.get_element();
    },

    get_dragMode : function() {
        return Sys.Preview.UI.DragMode.Move;                         
    },

    onDragStart : function() {
        Sys.Debug.trace('Drag and Drop started');
        
        this._dragStartLocation =                                    
            Sys.UI.DomElement.getLocation(this.get_element());//当开始拖动时，记录下元素的位置，如果本次拖放失败，还可以返回原位置     
    },

    onDrag : function() {
    },

    onDragEnd : function(cancelled) {
        Sys.Debug.trace('Drag and Drop ended');
        
        var element = this.get_element();
        if (cancelled) {
            Sys.UI.DomElement.setLocation(element, this._dragStartLocation.x, 
                this._dragStartLocation.y);//当拖放失败时，返回原位置                                   
        }
        else {
            alert('The goods Prices: ' + this.get_goodsPrice()); //当拖放成功时，显示商品的价格
        }
    },

    get_goodsPrice : function() {                                        
        return this._goodsPrice; //返回获取的商品价格                                     
    },                                                            
                                                                  
    set_goodsPrice : function(value) {                                
        this._goodsPrice = value;//设置商品的价格                                     
    }                                                             
}
Demo.goods.registerClass('Demo.goods', Sys.UI.Control, Sys.Preview.UI.IDragSource);

 

container.js文件代码如下：

 

Code
 Type.registerNamespace('Demo');

Demo.container = function(element) {
    Demo.container.initializeBase(this, [element]);
}
Demo.container.prototype = {
    initialize : function() {
        Demo.container.callBaseMethod(this, 'initialize');
        Sys.Preview.UI.DragDropManager.registerDropTarget(this);//向DragDropManager注册一个投放目标
    },
    
    dispose : function() {
        Sys.Preview.UI.DragDropManager.unregisterDropTarget(this);//销毁投放目标
        Demo.container.callBaseMethod(this, 'dispose');
    },
    
    get_dropTargetElement : function() {
        return this.get_element();
    },

    canDrop : function(dragMode, dataType, dragData) {
        return dataType == '__goods';//判断是否是__goods类型的元素，如果是，允许放入，否则不允许
    },

    drop : function(dragMode, dataType, dragData) {
    
    },

    onDragEnterTarget : function(dragMode, dataType, dragData) {
        
    },

    onDragInTarget : function(dragMode, dataType, dragData) {
    },

    onDragLeaveTarget : function(dragMode, dataType, dragData) {
       
    }
}
Demo.container.registerClass('Demo.container', Sys.UI.Behavior, Sys.Preview.UI.IDropTarget);

 

现在来创建Init.js文件，用于页面初始化，代码如下

 

Code
/**//// <reference name="MicrosoftAjax.js"/>
Sys .Application .add_init (pageInit);
 function pageInit() {
            $create(Demo.goods,{goodsPrice:'20￥'}, null, null, $get('img1'));
            $create(Demo.goods,{goodsPrice:'30￥'}, null, null, $get('img2'));
            $create(Demo.goods,{goodsPrice:'15.5￥'}, null, null, $get('img3'));
            $create(Demo.goods,{goodsPrice:'10￥'}, null, null, $get('img4'));
            $create(Demo.goods,{goodsPrice:'8￥'}, null, null, $get('img5'));
            $create(Demo.goods,{goodsPrice:'60￥'}, null, null, $get('img6'));
            $create(Demo.container, null, null, null, $get('container'));
        }
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

 

  6.        好了，我们的页面已经创建完成了，你可以运行一下看看效果。

思考：也许你会和我一样想，虽然功能很强大，但他的运行原理我们一点都不知道，是的，这点我也挺郁闷的！不过你可以自己调试一下，还是能看到一些信息的。我们现在所做的仅仅是实现了效果，但并没有和数据进行交互，这在现实中是没有意义的，下一节，我将和大家一起实现一个更复杂的例子，让你真正感受他的强大之处。

附：源码下载