Several folks requested the source code for the ASP.NET AJAX drag-drop example I alluded to in an earlier blog post. Here are the key parts of it (along with some explanations of how it works) that you can borrow using editor inheritance–I mean, cut-and-paste.
The first thing you must do to implement rich drag-drop scenarios in ASP.NET AJAX is implement the IDragSource interface defined in PreviewDragDrop.js. In my example, the user drags and drops color swatches, so I derived a class from Sys.UI.Behavior and implemented IDragSource in the derived class to create a “drag behavior” that I can attach to DOM elements. The drag behavior’s initialize method registers a handler for mousedown events. The handler initiates a drag-drop operation by calling Sys.Preview.UI.DragDropManager.startDragDrop, which is implemented in PreviewDragDrop.js. It also creates a drag visual by cloning the DOM element being dragged and setting the clone’s opacity to 0.4. Here’s the source code for the drag-behavior class:
// Other methods
initialize: function()
{
Custom.UI.ColorDragSourceBehavior.callBaseMethod(this, ‘initialize’);
$addHandler(this.get_element(), ‘mousedown’, this._mouseDownHandler)
},
mouseDownHandler: function(ev)
{
window._event = ev; // Needed internally by _DragDropManager
this._visual = this.get_element().cloneNode(true);
this._visual.style.opacity = ‘0.4’;
this._visual.style.filter = ‘progid:DXImageTransform.Microsoft.BasicImage(opacity=0.4)’;
this._visual.style.zIndex = 99999;
this.get_element().parentNode.appendChild(this._visual);
var location = Sys.UI.DomElement.getLocation(this.get_element());
Sys.UI.DomElement.setLocation(this._visual, location.x, location.y);
Sys.Preview.UI.DragDropManager.startDragDrop(this, this._visual, null);
},
dispose: function()
{
if (this._mouseDownHandler)
$removeHandler(this.get_element(), ‘mousedown’, this._mouseDownHandler);
this._mouseDownHandler = null;
Custom.UI.ColorDragSourceBehavior.callBaseMethod(this, ‘dispose’);
}
}
Custom.UI.ColorDragSourceBehavior.registerClass(‘Custom.UI.ColorDragSourceBehavior’,
Sys.UI.Behavior, Sys.Preview.UI.IDragSource);();
Converting a DOM element (such as a DIV) into a drag source is now a simple matter of newing up a ColorDragSourceBehavior, attaching it to the DOM element, and calling its initialize method:
The next step is to implement PreviewDragDrop.js’s IDropTarget interface. To accomplish this, I derived another class from Sys.UI.Behavior and implemented IDropTarget in the derived class. The implementation is pretty straightforward. In my example, the IDropTarget.drop method, which is called when a drop occurs, sets the background color of the DOM element to which the drop-target behavior is attached to the color being dragged (that is, the color encapsulated in the drag source). It also implements “drag highlighting” by setting the drop target’s background color to light gray when a cursor carrying a payload enters the drop target and restoring the original color when the cursor leaves. Here’s the drop-target behavior class:
Custom.UI.ColorDropTargetBehavior.prototype =
{
// IDropTarget methods
get_dropTargetElement: function()
{
return this.get_element();
},
canDrop: function(dragMode, dataType, data)
{
return (dataType == ‘DragDropColor’ && data);
},
drop : function(dragMode, dataType, data)
{
if (dataType == ‘DragDropColor’ && data)
{
this.get_element().style.backgroundColor = data;
}
},
onDragEnterTarget : function(dragMode, dataType, data)
{
if (dataType == ‘DragDropColor’ && data)
{
this._color = this.get_element().style.backgroundColor;
this.get_element().style.backgroundColor = ‘#E0E0E0’;
}
},
onDragLeaveTarget : function(dragMode, dataType, data)
{
if (dataType == ‘DragDropColor’ && data)
{
this.get_element().style.backgroundColor = this._color;
}
},
onDragInTarget : function(dragMode, dataType, data)
{
},
// Other methods
initialize: function()
{
Custom.UI.ColorDropTargetBehavior.callBaseMethod(this, ‘initialize’);
Sys.Preview.UI.DragDropManager.registerDropTarget(this);
},
dispose: function()
{
Sys.Preview.UI.DragDropManager.unregisterDropTarget(this);
Custom.UI.ColorDropTargetBehavior.callBaseMethod(this, ‘dispose’);
}
}
Custom.UI.ColorDropTargetBehavior.registerClass(‘Custom.UI.ColorDropTargetBehavior’,
Sys.UI.Behavior, Sys.Preview.UI.IDropTarget);();
The final task is to create a ColorDropTargetBehavior and attach it to a DOM element. In my example, the drop target is a DIV whose background color can be set by dropping a color swatch into it:
var target = new Custom.UI.ColorDropTargetBehavior ($get(‘DropTarget’));
target.initialize();
The end result is a compelling demo in which users can drag color swatches around the page and change the background color of drop targets with simple drag-drop operations. It still feels weird to me to be deriving classes and implementing interfaces in JavaScript, but you play the hand you’re dealt. I frequently tell audiences that the Microsoft AJAX Library has lots of features that aren’t exposed in the ASP.NET AJAX Extensions and that to get the most out of ASP.NET AJAX, you have to understand what’s on the client side and be willing to program it directly. This is a sterling example of the kind of features you can implement by going under the hood and familiarizing yourself with the client-side framework.
Microsoft Azure and Amazon Web Services (AWS) are two of the most popular cloud platforms.…
Cloud management is difficult to do manually, especially if you work with multiple cloud…
Azure’s scalable infrastructure is often cited as one of the primary reasons why it's the…
https://www.youtube.com/watch?v=wDzCN0d8SeA Watch our "Unlocking the Power of AI in your Software Development Life Cycle (SDLC)"…
FinOps is a strategic approach to managing cloud costs. It combines financial management best practices…
Using Kubernetes with Azure combines the power of Kubernetes container orchestration and the cloud capabilities…
View Comments
Here is a quick post on some great ASP.NET AJAX focused content that has been published recently: ASP.NET
Here is a quick post on some great ASP.NET AJAX focused content that has been published recently: ASP.NET
摘要本期共有8篇文章:ASP.NETAJAX文档更新、视频以及一些参考文章在ASP.NETAJAX中实现拖放功能使用来自于Codeplex的ASP.NETAJAXControl...
在Ajax程序中实现传统桌面程序中异常简单的拖放功能却并不是件容易的事情。然而Web上的拖放功能又如此的让人痴迷,所以几乎每个成熟的Ajax类库都提供了自己的一套实现拖放的封装,ASP.NETAJA...
在Ajax程序中实现传统桌面程序中异常简单的拖放功能却并不是件容易的事情。然而Web上的拖放功能又如此的让人痴迷,所以几乎每个成熟的Ajax类库都提供了自己的一套实现拖放的封装,ASP.NET AJAX
在Ajax程序中实现传统桌面程序中异常简单的拖放功能却并不是件容易的事情。然而Web上的拖放功能又如此的让人痴迷,所以几乎每个成熟的Ajax类库都提供了自己的一套实现拖放的封装,ASP.NETAJA...
ASP.NETAJAX(Atlas)拖放(Drag
Here is a quick post on some great ASP.NET AJAX focused content that has been published recently: ASP.NET