至顶网›软件频道 ›基础软件›ASP.NET 2.0 Atlas编写鼠标拖放程序

ASP.NET 2.0 Atlas编写鼠标拖放程序

扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条

本文将详细探讨Atlas中的声明性编程与强制性编程之间的关系，及如何用之在一个web客户端实现拖放功能。

作者：朱先忠编译来源：天极软件 2007年11月6日

关键字： Windows

五. 声明性Dropzone

　　我们可以在一个页面上拖动HTML元素，然后让它们位于其投放位置。然而，为了使该行为真正有用，当投放发生时，应该抛出一个事件。而且，所抛出的事件应该依赖于在何处发生投放。换句话说，需要把行为添加到一个给定HTML元素-由它来把这一行为转换成一个"dropzone"或"投放目标"，可以使用相同的方法把漂浮行为添加到一个HTML div标签以便把它转换成一个可拖放的元素。

　　在下列例子中，我将向你展示Atlas是如何支持dropzone概念的。在它的当前状态中，Atlas并不支持与其支持漂浮元素一样的方式来提供一种现成的行为以支持创建dropzone元素。然而，它确实实现了一个DragDropList元素和一个DraggableListItem元素的行为（这两个元素联用，允许你创建能够通过拖放重新排序的列表）。如果你想进一步探讨这一功能，你可以在网上找到若干使用DragDropList行为的好例子，例如，《Introduction to Drag And Drop with Atlas》。

　　dragdropzone行为的主要不利条件是，它仅与具有DragDropList行为的项一起工作。为了确定我上面描述的开放端点的dropzone功能的类型（它将与预定义的漂浮行为一同使用），你需要用JavaScript编写你自己的dropzone行为类。幸好，这并不困难。

　　Atlas把若干OOP扩展添加到JavaScript中以使加强其扩展能力，例如命名空间，抽象类和接口。在编写你自己的dropzone行为时你还要利用这些工具。如果你分析一下AtlasUIDragDrop.js文件的源码（可以使用Visual Studio调试器），那么你会发现在那里定义了若干接口，这包括一个相应于Sys.UI.DragSource而另一个相应于Sys.UI.DropTarget。事实上，FloatingBehavior类和DraggableListItem类都实现了Sys.UI.DragSource接口，而Sys.UI.DropTarget被DragDropList类所实现。这两个接口的代码如下所示：

Sys.UI.IDragSource = function() {
　this.get_dataType = Function.abstractMethod;
　this.get_data = Function.abstractMethod;
　this.get_dragMode = Function.abstractMethod;
　this.onDragStart = Function.abstractMethod;
　this.onDrag = Function.abstractMethod;
　this.onDragEnd = Function.abstractMethod;
}
Sys.UI.IDragSource.registerInterface('Sys.UI.IDragSource');
Sys.UI.IDropTarget = function() {
　this.get_dropTargetElement = Function.abstractMethod;
　this.canDrop = Function.abstractMethod;
　this.drop = Function.abstractMethod;
　this.onDragEnterTarget = Function.abstractMethod;
　this.onDragLeaveTarget = Function.abstractMethod;
　this.onDragInTarget = Function.abstractMethod;
}
Sys.UI.IDropTarget.registerInterface('Sys.UI.IDropTarget');

　　为什么你需要实现这些接口而不是简单地编写一些新类来支持拖放和dropzone呢？秘密是，在后台，还有一个类DragDropManager，负责实际协调可拖放元素与dropzone元素之间的交互，并且它仅仅知道如何与实现IDragSource或IDropTarget接口的类一起工作。这个DragDropManager类注册对于每一个可拖放的元素来说哪些dropzone是合法的目标，并处理MouseOver事件以决定何时一个dropzone上面具有一个可拖放的元素，以及其它你不需要自己做的大量事情。事实上，它处理得如此完美，以至后面你要编写的dropzone行为需要极少的代码。首先，创建一新的JavaScript文件DropZoneBehavior.js。我把我的JavaScript文件放到了一个子目录scriptLibrary下，但是，这对于实现dropzone行为是不必要的。然后，把下列代码复制到你的文件中：

Type.registerNamespace('Custom.UI');
Custom.UI.DropZoneBehavior = function() {
　Custom.UI.DropZoneBehavior.initializeBase(this);
　this.initialize = function() {
　　Custom.UI.DropZoneBehavior.callBaseMethod(this， 'initialize');
　　//把我们自己注册为一个拖放目标.
　　Sys.UI.DragDropManager.registerDropTarget(this);
　}
　this.dispose = function() {
　　Custom.UI.DropZoneBehavior.callBaseMethod(this， 'dispose');
　}
　this.getDescriptor = function() {
　　var td = Custom.UI.DropZoneBehavior.callBaseMethod(this， 'getDescriptor');
　　return td;
　}
　//IDropTarget成员.
　this.get_dropTargetElement = function() {
　　return this.control.element;
　}
　this.drop = function(dragMode， type， data) {
　　alert('dropped');
　}
　this.canDrop = function(dragMode， dataType) {
　　return true;
　}
　this.onDragEnterTarget = function(dragMode， type， data) {}
　this.onDragLeaveTarget = function(dragMode， type， data) {}
　this.onDragInTarget = function(dragMode， type， data) {}
}
Custom.UI.DropZoneBehavior.registerClass('Custom.UI.DropZoneBehavior'，
　Sys.UI.Behavior， Sys.UI.IDragSource，
　Sys.UI.IDropTarget， Sys.IDisposable);
Sys.TypeDescriptor.addType('script'， 'DropZoneBehavior'，
　Custom.UI.DropZoneBehavior);

　　我需要解释一下这个类。首先要注意从第二（以"Custom.UI.DropZoneBehavior.registerClass"开始）到最后一行代码。这是上面定义的dropZoneBehaviorClass注册到Atlas的位置。registerClass方法的第一个参数相应于类的名字，第二个参数则相应于基类的名字。第三个参数相应于实现新类的接口。接下来的一行代码使你的类可用于声明性标记脚本。现在，我们回到开始，"Type.registerNamespace"方法允许你注册你的定制命名空间。下一行使用一个匿名方法语法声明我们的新类。这里使用了JavaScript面向对象的设计思想，这对于设计Atlas行为来说是必要的。在该匿名方法中，类方法Initialize，Dispose和getDescriptor都是一些简单的标准方法，用于所有的行为类，而且在这个简单实现中，你仅需要调用基方法（也就是，从这个例子的第二到最后一行代码中所指定的基类的方法）即可。你要做的唯一特别的一点是，使用在Initialize方法中的Sys.UI.DragDropManager来注册拖放目标。这里是大部分的拖放"魔术"所在。

　　然后，你实现IDropTarget方法。在这个例子中，你仅实现了两个方法：this.canDrop与this.drop。对于canDrop，你只是简单地返回true。其实，更有趣的逻辑可以放到其中，譬如实现有哪些div标签被实际拖放到一个给定的目标上，或者决定相应于不同类型的漂浮div，在拖放它们时各自的不同行为；但是，在此情况下，你仅想简单地实现IDropTarget-它允许任何漂浮div拖动到其上。你的"drop"方法的实现只是个框架而已。当一个漂浮元素被拖放到你的拖放目标之一时，将显示一条警告消息指示已经发生了一些事情。现在，你已经有了一个拖放行为，它能够与我们在上一个例子中所用的漂浮行为一同工作。

　　现在你应该创建一个页面来展示你的新定制的dropzone行为。为此，你可以在前面示例的基础上来实现。在Atlas脚本管理器中，除注册AtlasUIDragDrop脚本以外，你还要注册你的新的DropZoneBehavior脚本：

＜atlas:ScriptManager ID="ScriptManager1" runat="server"＞
＜Scripts＞
＜atlas:ScriptReference ScriptName="AtlasUIDragDrop" /＞
＜atlas:ScriptReference Path="scriptLibrary/DropZoneBehavior.js" /＞
＜/Scripts＞
＜/atlas:ScriptManager＞

　　然后，你要把一个新的div标签添加到HTML体，这可以被用作一个拖放的目标：

＜div style="background-color:Red;height:200px;width:200px;"＞
＜div id="draggableDiv" style="height:100px;width:100px;background-color:Blue;"＞
＜div id="handleBar" style="height:20px;width:auto;background-color:Green;"＞
＜/div＞
＜/div＞
＜/div＞
＜div id="dropZone" style="background-color:cornflowerblue;height:200px;width:200px;"＞
Drop Zone
＜/div＞

　　最后，你需要添加一个声明性标记元素以添加你的定制DropZone行为到你计划用作一个dropzone元素的div。该XML标记应该有如下所示形式：

＜script type="text/xml-script"＞
＜page xmlns:script="http://schemas.microsoft.com/xml-script/2005"＞
　＜components＞
　　＜control id="dropZone"＞
　　　＜behaviors＞
　　　　＜DropZoneBehavior/＞
　　　＜/behaviors＞
　　＜/control＞
　　＜control id="draggableDiv"＞
　　　＜behaviors＞
　　　　＜floatingBehavior handle="handleBar"/＞
　　　＜/behaviors＞
　　＜/control＞
　＜/components＞
＜/page＞
＜/script＞

　　刚才的代码把一个dropzone添加到最初声明的拖放示例中。当你在dropzone上拖动元素时，将出现一个警告消息框。你可以扩展这些代码以便使你的定制dropzone行为的drop方法实现一些更为有趣的事情，例如激活当前的页面中的其它JavaScript事件，甚至使用Atlas调用一个web服务-由它来为你处理服务器端代码。

VIP专区

VIP用户

普通用户

闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾剧懓顪冪€ｎ亜顒㈡い鎰矙閺屻劑鎮㈤崫鍕戙垽鏌ｉ鐕佹疁妤犵偞鐗曡彁妞ゆ巻鍋撳┑陇鍋愮槐鎺楀箛椤撗勭杹闂佸搫鐭夌换婵嗙暦閸洖鐓涘ù锝夋敱閻繘姊绘担鍛婃儓妞ゆ垵鎳橀弻濠囨晲婢跺﹨鎽曢梺鍝勬祫缁辨洟鎮块埀顒勬煟鎼搭垳绉靛ù婊呭仦缁傛帡鎮欓鍌滅槇濠电偛鐗嗛悘婵嬫倶閻樼粯鐓忛柛顐ゅ枑閸婃劗鈧鍠栭…宄邦嚕閹绢喗鏅柛鏇ㄥ幗濠㈡垿姊虹拠鎻掑毐缂傚秴妫欑粋宥夊冀椤撶偟锛涢梺瑙勫礃椤曆囧礃閳ь剙顪冮妶鍡樺蔼闁告柨娴风划娆掔疀濞戞瑢鎷洪柣鐘充航閸斿苯鈻嶉幇鐗堢厵闁告垯鍊栫€氾拷

婵犵數濮烽弫鍛婃叏閻戣棄鏋侀柛娑橈攻閸欏繘鏌ｉ幋婵愭綗闁逞屽墮閸婂湱绮嬮幒鏂哄亾閿濆簼绨介柛鏃撶畱椤啴濡堕崱妤€娼戦梺绋款儐閹瑰洭寮诲☉銏″亜闂佸灝顑呮禒鎾⒑缁洘鏉归柛瀣尭椤啴濡堕崱妤€娼戦梺绋款儐閹稿墽妲愰幘鎰佸悑闁告粌鍟抽崥顐⑽旈悩闈涗粶闁哥噥鍋夐悘鎺楁煟閻樺弶绌块悘蹇旂懅缁綁鎮欓悜妯锋嫼閻熸粎澧楃敮鎺撶娴煎瓨鐓曢柟鎯ь嚟濞叉挳鏌熼钘夊姢閻撱倖銇勮箛鎾村櫝闁归攱妞藉濠氬磼濮樺崬顤€闂佸憡顨嗗ú鐔风暦婵傜ǹ唯闁靛／鍕弰濠电姷鏁告慨鎾晝閵堝洠鍋撳鐓庡籍鐎规洩缍€缁犳盯寮崒婊呮濠电姷鏁告慨鎾磹缂佹ɑ娅犳繛鎴欏灪閻撴洟鎮楅敐鍐ㄥ濠碘€茬矙閺屾洟宕惰椤忣厾鈧鍠曠划娆愪繆濮濆矈妲归梺閫炲苯澧悽顖ょ節瀵鎮㈤崗鐓庣檮婵犮垼娉涢敃銉モ枔婵犳碍鈷戦柛婵嗗閻忛亶鏌涢悩宕囧⒌妤犵偛鍟オ浼村醇濠靛牆骞愰梻浣呵归張顒傜矙閹惧箍浜归悗锝庡枟閻撶喖骞栧ǎ顒€鈧倕岣块幇顓犵闁告瑥顥㈤鍫熷仼婵犻潧鐗忛惌娆撴偣閹帒濡芥繛鍫ョ畺濮婃椽宕滈幓鎺嶇凹濠电偛寮堕悧鐘诲箖閳ユ枼妲堥柕蹇ョ磿閸橀亶鏌ｈ箛鏇炰粶濠⒀傜矙閹瞼鈧綆鍋嗙粻楣冩煕椤愩倕鏋戦柛濠冨姈閹便劍绻濋崟顓炵闂佺懓鍢查幊鎰垝閻㈢鍋撻敐搴濈凹闁伙絼鍗冲缁樻媴鐟欏嫬浠╅梺鍛婃煥椤戝鐣烽敓鐘茬闁肩⒈鍓氬▓楣冩⒑闂堟稓绠為柛濠冩礋瀹曟﹢鍩€椤掆偓椤啴濡堕崱妤€顫囬梺绋块瀹曨剟鎯冮鍕拻闁稿本鐟ч崝宥夋倵缁楁稑鎳愰惌娆撴煙鐎电ǹ袥闁稿鎸搁～婵嬫偂鎼达紕鐫勯柣搴ゎ潐濞叉垿宕￠崘鑼殾闁告鍊ｉ悢鍏尖拹闁归偊鍠氬▔鍧楁⒒閸屾瑧绐旀繛浣冲洦鍋嬮柛鈩冪☉缁犵娀骞栧ǎ顒€鐏柛娆忕箲閵囧嫰骞掗崱妞惧闂備礁鐤囬～澶愬垂閸ф鏄ラ柕澶嗘櫅楠炪垺淇婇悙鎻掆挃闁告垼顫夌换婵嬫偨闂堟刀鐐烘煕閵婏附銇濋柡浣割儔閺屟囨嚒閵堝懍娌繛锝呮搐閿曨亝淇婇崼鏇炲窛妞ゆ柨鍚嬮锟犳⒒娴ｅ懙褰掝敄閸涙潙纾归柛锔诲幗瀹曞弶绻涢幋娆忕仼妤犵偑鍨烘穱濠囶敍濠垫劕娈紒鐐緲缁夊綊寮婚敐鍡樺劅闁靛骏绲介ˉ婵嗩渻閵堝繐顩柡浣筋嚙椤曪絿鎷犲顔兼倯闂佸壊鍋掗崑鍛搭敁閸ヮ剚鈷掑ù锝呮啞閸熺偤鏌熼幖浣虹暫鐎规洜澧楅幆鏃堚€﹂幋鐐存珨闂備焦瀵х换鍌炈囨禒瀣瀬闁糕剝銇滈埀顒佸笒椤繈顢楁繝鍌氼潬闂備焦妞块崢浠嬨€冮崱娆愬床婵炴垯鍨圭粻濠氭煛婢跺鐏╅柛鏂惧嵆濮婅櫣绮欏▎鎯у壉闂佸湱鎳撳ú顓烆嚕婵犳碍鏅查柛娑变簼椤秴鈹戦悙鍙夘棡闁告梹娲滄竟鏇㈠箮閼恒儮鎷洪梺鍛婄箓鐎氼厼锕㈤幍顔剧＜閻庯綆鍋勯悘鎾煕閳哄啫浠辨鐐差儔閺佸啴鍩€椤掆偓椤斿繐鈹戦崶銉ょ盎闂佸搫娲ㄩ崑鐐哄闯濞差亝鐓冮悹鍥嚋閸旂喓绱掓潏銊﹀磳鐎规洘甯掗埢搴ㄥ箣濠靛棭鐎村┑锛勫亼閸婃垿宕濆畝鍕疇婵せ鍋撴鐐叉閻ｆ繈宕熼銈忕床闂備胶绮崝娆忈缚瑜忕划濠囨晝閸屾稓鍘甸梺绋跨箺閸嬫劙寮冲鈧弻娑㈠棘鐠恒劎鍔梺璇″枤閸嬨倕鐣疯ぐ鎺濇晝闁绘ǹ浜惄搴ㄦ⒒娴ｅ憡璐￠柛搴涘€濆畷褰掓偨閸撳弶鏅滈梺鍐叉惈閹冲繘宕愰崹顐ｅ弿婵妫楁晶缁樹繆閹绘帞绉洪柡灞炬礋瀹曟儼顦叉い蹇ｅ幘閳ь剚顔栭崰鏇犲垝濞嗘劒绻嗘慨婵嗙焾濡插ジ姊洪棃鈺冪シ闁稿骸纾Σ鎰板箻鐎涙ê顎撶紓浣圭☉椤戝懎鈻撻鐐╂斀闁宠棄妫楁禍婵堢磼鐠囪尙澧曟い鏇稻缁绘繂顫濋鐐扮盎缂備胶鍋撴刊鑺ャ仈閹间礁鐤鹃柨婵嗩槹閸嬧剝绻濇繝鍌氭殶閺佸牓姊虹拠鈥虫灍闁挎洏鍨介獮濠囨偐濞茬粯鏅㈤梺绋挎湰缁絿妲愰弻銉︹拺闁告繂瀚峰Σ鎼佹煟濡も偓鐎氭澘鐣峰┑鍥ㄥ劅闁挎繂娲ｇ粭澶愭⒑缂佹ê濮夐柛搴涘€濋幃鈥斥槈閵忊€斥偓鍫曟煟閹邦垱纭剧悮姘舵⒑閸濄儱校闁挎洏鍨藉濠氬焺閸愨晛顎撻梺鑽ゅ枑濠㈡﹢锝為幒妤佸€甸悷娆忓缁€鍫ユ煕閻樺磭澧甸柕鍡曠椤粓鍩€椤掑嫬绠栭柍鍝勬噺閹偞銇勯幇鈺佲偓婵嬪箯婵犳碍鈷掗柛灞捐壘閳ь剙鍢查湁闁搞儜鍛闂佸壊鐓堥崑鍛村矗韫囨稒鐓欓柟顖涙緲琚氶梺鎶芥敱濮婂鍩€椤掆偓缁犲秹宕曢柆宓ュ洭顢涢悙鎻掔€梺绋跨灱閸嬬偤鎮￠姀鈥茬箚妞ゆ牗绮岄惃鎴犵磼鏉堛劌鍝洪柡灞诲妼閳规垿宕遍埡鍌傦妇绱撴担鎻掍壕闁诲函缍嗛崑浣圭濠婂牊鐓涚€广儱鍟俊鍧楁煃閽樺妲圭紒缁樼洴瀹曞ジ鎮㈤搹鍦帨婵犳鍠栭敃銊モ枍閿濆應妲堥柣銏⑶瑰婵囥亜閺傛儳瀚庨柍褜鍓氶崝鏇⑩€旈崘顔嘉ч幖绮光偓鑼嚬婵犵數鍋犵亸娆撳窗閺嵮呮殾婵炲樊浜滈悞鍨亜閹哄秹妾峰ù婊勭矒閺岀喖宕崟顒夋婵炲瓨绮撶粻鏍ь潖濞差亜绠伴幖娣灮閳规稒绻濈喊妯峰亾閾忣偅鎮欓柛妤呬憾閺岀喖鎮ч崼鐔哄嚒缂備緡鍋勭粔褰掑蓟濞戙埄鏁冮柨婵嗘川閻ｇ厧顪冮妶鍡樺鞍婵＄偠妫勯～蹇涙惞閸︻厾锛滃┑鈽嗗灠閹碱偊锝炲畝鍕€垫繛鍫濈仢濞呮﹢鏌涢幘瀵告噯闁诲繐鍟村娲川婵犱胶绻侀梺鍝ュУ瀹€绋跨暦閵忋倕绠瑰ù锝呭帨閹锋椽姊洪崨濠冨鞍鐟滄澘鍟粋宥嗙鐎ｎ偆鍘遍柣搴秵娴滄粓顢旈銏＄厵妞ゆ梹鏋婚懓鍧楁煛娴ｇǹ鏆ｇ€规洘甯掗埥澶婎潩椤掆偓缁犵偤姊绘担绛嬪殭闁告垹鏅槐鐐哄幢濞戞ḿ锛涢梺绯曞墲钃辨繛鍛У閵囧嫰骞掗幋婵冨亾閼姐倕顥氬┑鍌氭啞閻撴洟鎮橀悙鎻掆挃闁宠棄顦辩槐鎺戭渻閿曗偓濞诧箓鎮″▎鎾寸厽闁绘柨鎲＄欢鍙夈亜韫囷絽寮柡宀€鍠栭幃鈩冩償閵忥絿顢呴梻浣烘嚀瀵爼骞愰崘鑼殾闁绘柨鍚嬮ˉ鍫熺箾閹寸偟鎳勯柣婵撶節濮婂宕掑顑藉亾閹间礁纾瑰瀣捣閻棗銆掑锝呬壕濡ょ姷鍋為悧鐘汇€侀弴銏犖ч柛灞剧煯婢规洖鈹戦鐭亜鐣烽鍕偍閻庣數纭堕崑鎾舵喆閸曨剛顦ョ紓鍌氱Т閿曨亜顕ｆ繝姘耿婵°倕锕ら幃鎴︽⒑閸涘﹣绶遍柛銊ф櫕濡叉劙鏌嗗鍡欏幗闁硅壈鎻槐鏇㈡偩椤撱垺鐓曢幖娣妺閹查箖鎸婂┑鍠㈠綊宕楅崗鑲╃▏缂佺偓宕樺▔鏇㈠焵椤掆偓缁犲秹宕曢柆宓ュ洦瀵肩€涙ê浜楅梺鍝勬储閸ㄦ椽鎮″☉銏＄厱闁靛绲介崝姘攽閿涘嫬甯舵い顓″劵椤т線鏌涢妸銈呭祮婵犫偓娓氣偓濮婅櫣绱掑Ο鎾虫贡缁棃顢氶埀顒勩€侀弮鍫濋唶闁绘棁娅ｉ弳銏ゆ⒒閸屾艾鈧兘鎮為敂閿亾缁楁稑鎳忓畷鏌ユ煕鐏炵虎鍤ゆ繛鎴烆焸閺冨牆宸濇い鎾跺Т楠炴帡姊绘担鍛婃儓婵炲眰鍨藉畷鐟懊洪鍛簵闂佸憡鍔︽禍婵嬪窗閹邦厾绡€濠电姴鍊绘晶鏇犵磼閳ь剟宕奸悢绋垮伎濠碘槅鍨辩€笛呮兜妤ｅ啯鐓㈤柛鎰典簻閺嬫盯鏌＄仦鐐缂佺粯绋栭ˇ鏌ユ倵濮樺崬鍘寸€规洘鍨挎俊鎼佸煛閸屾瀚肩紓鍌氬€烽悞锕傛晪婵犳鍠栧ú锕傚Φ閸曨垰鍗抽柕濞垮劚缁秹姊虹化鏇熸澓闁搞劏妫勯锝夊箻椤旂⒈娼婇梺鐐藉劜閺嬪ジ宕戦幘缁樺仺闁告稑锕﹂崣鍡椻攽閻樼粯娑ф俊顐ｎ殜閸┾偓妞ゆ帒鍊归崵鈧梺瀹狀嚙缁夌懓鐣烽崼鏇炍╅柨婵嗗閻╁酣姊绘繝搴′簻婵炶濡囩划娆撳箛閺夎法鐤呮俊銈忕到閸燁垶鎮″☉銏″€堕柣鎰版涧娴滃墽绱掗埀顒傗偓锝庡厴閸嬫挾鎲撮崟顒傤槹婵炲瓨绮岄悥濂稿Υ娴ｅ壊娼ㄩ柍褜鍓熼獮鍐閿涘嫰妾繝銏ｆ硾椤﹁鲸寰勯敓锟�

重磅专题

往期文章

ASP.NET 2.0 Atlas编写鼠标拖放程序

业界热点: