MSDN Magazin > Home > Ausgaben > 2008 > January >  Wicked Code: Drag & Drop mit ASP....
Wicked Code
Drag & Drop mit ASP.NET AJAX
Jeff Prosise

Codedownload verfügbar unter: WickedCode2008_01.exe (296 KB)
Browse the Code Online
AJAX bedeutete eine Revolution für Weboberflächen. Durch ASP.NET AJAX wurde AJAX für Visual Studio®-Benutzer verfügbar gemacht. Es wird in drei separaten Downloads bereitgestellt: ASP.NET AJAX Extensions (asp.net/ajax/downloads), das den vollständig getesteten Kernsatz der AJAX-Funktionen bereitstellt, ASP.NET AJAX Futures (asp.net/downloads/futures), das experimentelle Features enthält, zu denen die Produktgruppe Feedback wünscht, und das ASP.NET AJAX Control Toolkit (asp.net/ajax/ajaxcontroltoolkit/samples), das jede Menge AJAX-Steuerelemente sowie ein SDK zum Erstellen eigener Steuerelemente bereitstellt.
Von diesen drei Downloads wurde der Futures-Version von der Entwicklercommunity am wenigsten Aufmerksamkeit gezollt. Das ist bedauerlich, denn die Community Technology Preview (CTP) für Futures bietet nicht nur einen Blick darauf, wie zukünftige Versionen von ASP.NET AJAX aussehen könnten, er enthält dazu eine Unmenge an Features, mit denen topaktuelle Webanwendungen erstellt werden können. Ein typischer Fall ist Drag & Drop.
In der Futures-Datei „PreviewDragDrop.js“ befindet sich Unterstützung für umfassende, browserbasierte Drag & Drop-Benutzeroberflächen. Das verwendete Modell ist dem alten OLE-Drag & Drop-Modell nachgebildet, in dem Dragquellen die Schnittstelle „IDragSource“ und Dropziele die Schnittstelle „IDropTarget“ implementieren und das System einen Drag & Drop-Manager bereitstellt, um Dragquellen und Dropziele miteinander zu verbinden. Der Drag & Drop-Manager von Futures ist eine Instanz einer JavaScript-Klasse namens „Sys.Preview.UI._DragDropManager“, die automatisch instanziiert und durch eine globale Variable namens „Sys.Preview.UI.DragDropManager“ bereitgestellt wird.
Seit Monaten habe ich die Absicht, ein Beispiel zu schreiben, in dem mithilfe von PreviewDragDrop.js und benutzerdefinierten Dragquellen sowie benutzerdefinierten Dropzielen echtes Drag & Drop implementiert wird. Endlich bin ich dazu gekommen, und die Ergebnisse sind ziemlich cool. Dabei habe ich einiges über DragDropManager gelernt, u. a. wie dieser verbessert werden kann, indem Unterstützung für benutzerdefinierte Dragdarstellungen hinzugefügt wird. Wenn Sie erst einmal mit dem Modell sowie dem Ableiten von Klassen und Implementieren von Schnittstellen in JavaScript vertraut sind, eröffnet DragDropManager völlig neue Möglichkeiten für Weboberflächen.

Drag & Drop in Aktion
Bevor auf den Code eingegangen wird, nehmen Sie sich einen Moment Zeit, um das Beispielprojekt herunterzuladen, das diesen Artikel begleitet, und überfliegen Sie es kurz. Öffnen Sie es mit dem Visual Studio-Befehl „Website öffnen“, und zeigen Sie dann die Startseite „DragDropDemo.aspx“ in Ihrem Browser an. Um dieses Beispiel ausführen zu können, muss ASP.NET AJAX Extensions installiert sein. Sie müssen die Futures-CTP nicht herunterladen und installieren, da dieser sich bereits im Bin-Ordner der Website befindet.
Oben auf der Seite werden fünf Farbmuster angezeigt, und unten ein leeres Feld mit der Beschriftung „Drop It Here“ (Hier ablegen) (siehe Abbildung 1). Die Farbmuster sind Dragquellen, und das leere Feld ist das Dropziel. Nehmen Sie eines der Farbmuster mit der Maus auf, und ziehen Sie es zum leeren Feld hinunter. Beobachten Sie, wie die Feldfarbe von weiß zu hellgrau wechselt, wenn der Cursor in den Bereich eintritt. Dieses Feature wird als Hervorheben des Dropziels bezeichnet. Legen Sie nun das Farbmuster auf dem Feld ab. Das Feld wechselt die Farbe, um sich dem Muster anzupassen.
Abbildung 1 DragDropDemo.aspx in Aktion (Klicken Sie zum Vergrößern auf das Bild)
Nehmen Sie ein anderes Farbmuster auf, und verschieben Sie es über den Bildschirm. Beachten Sie, dass das Muster nur auf dem Dropziel abgelegt werden kann, und dass der Cursor anzeigt, ob ein Ablegen in diesem Moment akzeptiert würde. Beachten Sie außerdem, dass dem Cursor eine teilweise transparente Wiedergabe des Musters – eine „Dragdarstellung“ – folgt, während Sie ziehen, sodass Sie sehen können, was Sie ziehen. Wie Sie gleich sehen werden, schreiben Sie den Code, um die Dragdarstellung zu erstellen, doch alles Weitere wird von ASP.NET AJAX verarbeitet. Dazu gehören auch das Verschieben der Dragdarstellung mit dem Cursor und die Aktualisierung des Cursors bei jeder Mausbewegung.
Die benutzerdefinierte Logik, mit der diese Seite gesteuert wird, befindet sich in einer Skriptdatei namens „ColorDragDrop.js“ im Scripts-Ordner der Website. ColorDragDrop.js ist eine benutzerdefinierte Skriptdatei, die vom ScriptManager geladen wird. Wenn Sie DragDropDemo.aspx in der Quellansicht öffnen, dann sehen Sie, dass ScriptManager drei Skriptdateien lädt: PreviewScript.js, das eine wichtige Basisklasse von ASP.NET AJAX enthält, die in dieser Demo verwendet wird, PreviewDragDrop.js, das die von ColorDragDrop.js verwendete Drag & Drop-Unterstützung enthält, und ColorDragDrop.js selbst.

DragDropManager
Der erste Schritt beim Erstellen umfassender Drag & Drop-Benutzeroberflächen mit ASP.NET AJAX ist, sich mit der Sys.Preview.UI._DragDropManager-Klasse vertraut zu machen (im Folgenden als „DragDropManager“ bezeichnet). Hinter den Kulissen delegiert diese Klasse die meisten Vorgänge an eine Instanz von Sys.Preview.UI.IEDragDropManager oder Sys.Preview.UI.GenericDragDropManager, je nach Typ des Hostbrowsers. Ihre öffentliche Schnittstelle besteht aus mehr als einem Dutzend Methoden, von denen drei bei der Implementierung von Drag & Drop eine wichtige Rolle spielen:
  • startDragDrop – initiiert einen Drag & Drop-Vorgang.
  • registerDropTarget – registriert ein Objekt als Dropziel.
  • unregisterDropTarget – hebt die Registrierung eines Dropziels auf.
Die Hauptaufgabe von DragDropManager nach dem Aufrufen seiner startDragDrop-Methode ist die ständige Überwachung von Mausereignissen, die Auslösung entsprechender Benachrichtigungen an die Dragquelle und das Dropziel (falls vorhanden) unterhalb des Cursors sowie die Form des Cursors, um eine visuelle Anzeige des Ereignisses bereitzustellen, das beim Ablegen des Objekts am aktuellen Ort eintreten würde. Dazu registriert DragDropManager eigene Handler für wichtige Ereignisse wie „mousemove“ und „mouseup“. Von diesen Ereignishandlern werden für gezogene Quellen IDragSource-Methoden und für alle der unten aufgeführten Dropziele IDropTarget-Methoden aufgerufen.
Wenn ein Cursor mit einer Nutzlast z. B. in die Grenzen eines Dropziels eintritt, ruft DragDropManager die Methoden „get_dragDataType“, „get_dragMode“ und „getDragData“ der Quelle auf, um Informationen zur Nutzlast zu erhalten. Dann werden die Ergebnisse an die canDrop-Methode des Dropziels übergeben, um zu ermitteln, ob die Dragquelle und das Dropziel kompatibel sind. Wenn ein Ablegen stattfindet, benachrichtigt DragDropManager das Dropziel, indem er dessen Dropmethode aufruft. Dabei werden wiederum Daten weitergegeben, die von der Dragquelle bezogen werden.
DragDropManager kann ermitteln, ob der Cursor sich über einem Dropziel befindet, da er ein internes Array von Verweisen auf Objekte unterhält, die als Dropziele registriert sind. Objekte werden dem Array hinzugefügt, indem die registerDropTarget-Methode von DragDropManagers aufgerufen wird, und entfernt, indem „unregisterDropTarget“ aufgerufen wird. Es ist wichtig, die Registrierung von Dropzielen aufzuheben, die registriert wurden, sodass DragDropManager die Registrierung der zugeordneten Ereignishandler aufheben kann, die für diese Dropziele registriert wurden. Geschieht dies nicht, kann es zu Speicherverlusten kommen.
DragDropManager ist der Leim, der Dragquellen und Dropziele miteinander verbindet. Ohne ihn müssten Sie eine Unmenge Code schreiben, damit Drag & Drop-Benutzeroberflächen funktionieren, insbesondere dann, wenn sie in verschiedenen Browsern funktionieren sollen.

Erstellen von Dragquellen
Bevor Sie mit dem Ziehen beginnen können, müssen Sie etwas zum Ziehen haben, also eine Dragquelle. Für ASP.NET AJAX ist eine Dragquelle einfach ein Objekt, das die in PreviewDragDrop.js definierte Schnittstelle „IDragSource“ implementiert. In Abbildung 2 sind die Methoden aufgeführt, die zu dieser Schnittstelle gehören.

Methode Beschreibung
get_dragDataType Gibt den gezogenen Datentyp zurück.
getDragData Gibt die gezogenen Daten zurück.
get_dragMode Gibt den Dragmodus (Verschieben oder Kopieren) zurück.
onDragStart Wird aufgerufen, wenn das Ziehen der Dragquelle beginnt.
onDrag Wird wiederholt aufgerufen, während die Dragquelle gezogen wird.
onDragEnd Wird aufgerufen, wenn das Ziehen abgeschlossen ist.
Angesichts der Tatsache, dass JavaScript Schnittstellen nicht explizit unterstützt, mag es seltsam erscheinen, in JavaScript Schnittstellen zu implementieren. Außerdem werden Klassen, Vererbung, Namespaces und andere Grundsätze objektorientierter Programmierung (OOP) ebenfalls nicht explizit unterstützt. Dennoch ist die Clienthälfte von ASP.NET AJAX, die Microsoft® AJAX-Bibliothek, eine Klassenbibliothek, die vollständig in JavaScript implementiert wird. OOP wird mit gängigen JavaScript-Programmiertechniken imitiert, mit denen Sie eigene Klassen erstellen und sogar Schnittstellen in diesen Klassen implementieren und eine Klasse von einer anderen ableiten können.
ColorDragDrop.js enthält zwei JavaScript-Klassen namens „ColorDragSourceBehavior“ und „ColorDropTargetBehavior“. Erstere implementiert IDragSource, und beide gehören zu einem Namespace namens „Custom.UI“.
Um eine JavaScript-Klasse im Stil der Microsoft AJAX-Bibliothek zu erstellen, definieren Sie zunächst eine Funktion mit demselben Namen wie dem Klassennamen. Diese Funktion dient als Klassenkonstruktor:
Custom.UI.ColorDragSourceBehavior = function(element, color)
{
    Custom.UI.ColorDragSourceBehavior.initializeBase(this, [element]);
    this._mouseDownHandler = Function.createDelegate(this,
        this.mouseDownHandler);
    this._color = color;
    this._visual = null;
}
Dann verwenden Sie die Prototypeigenschaft von JavaScript, um Methoden zu definieren, die in jede Instanz der Klasse eingefügt werden:
Custom.UI.ColorDragSourceBehavior.prototype =
{
    // Methods here
}
JavaScript unterstützt starke Typisierung oder Typreflektion nicht, daher wird dies von der Microsoft AJAX-Bibliothek übernommen. Methoden der Type-Klasse (in MicrosoftAjax.js zu finden, die Bestandteil des Kerns von ASP.NET AJAX ist) wie „registerClass“ und „registerNamespace“ ermöglichen Ihnen, selbst erstellte Klassen zu registrieren und sie Namespaces zuzuweisen. Später können Sie Methoden wie „getTypeName“ verwenden, die dem integrierten Object-Typ von JavaScript über die Microsoft AJAX-Bibliothek hinzugefügt werden, um die von Ihnen registrierten Typen widerzuspiegeln.
Ein weiterer wesentlicher Bestandteil der Infrastruktur, der von der Type-Klasse bereitgestellt wird, ist eine Methode zum Aufrufen einer Basisklassenmethode aus der entsprechenden Methode einer abgeleiteten Klasse. Von einem Klassenkonstruktor rufen Sie initializeBase auf, um den Konstruktor der Basisklasse aufzurufen, und von einer Außerkraftsetzung einer Methode in einer abgeleiteten Klasse rufen Sie callBaseMethod auf, um die gleichwertige Methode in der Basisklasse aufzurufen.
Die ColorDragSourceBehavior-Klasse in Abbildung 3 verwendet all diese Tools, um die Logik einzukapseln, die zum Konvertieren eines gewöhnlichen DOM-Elements in eine Dragquelle innerhalb einer benutzerfreundlichen Klasse erforderlich ist. Aus dem Aufruf an registerClass können Sie erkennen, dass ColorDragSourceBehavior sowohl von der IDragSource-Schnittstelle als auch von einer ASP.NET AJAX-Basisklasse namens „Sys.UI.Behavior“ abgeleitet wird, die in MicrosoftAjax.js definiert ist. Erstere ermöglicht ColorDragSourceBehavior, als Dragquelle zu fungieren. Letztere ermöglicht das Anhängen von Instanzen von ColorDragSourceBehavior an DOM-Elemente, um deren Verhalten zu ändern.
Custom.UI.ColorDragSourceBehavior = function(element, color)
{
    Custom.UI.ColorDragSourceBehavior.initializeBase(this, [element]);
    this._mouseDownHandler = Function.createDelegate(this,
        this.mouseDownHandler);
    this._color = color;
    this._visual = null;
}

Custom.UI.ColorDragSourceBehavior.prototype =
{
    // IDragSource methods
    get_dragDataType: function()
    {
        return 'DragDropColor';
    },

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

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

    onDragStart: function() {},

    onDrag: function() {},

    onDragEnd: function(canceled)
    {
        if (this._visual)
            this.get_element().parentNode.removeChild(this._visual);
    },
    
    // 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);

Die meisten Methoden, die ColorDragSourceBehavior implementiert („get_dragDataType“, „getDragData“ und so weiter) sind Mitglieder der IDragSource-Schnittstelle. Doch ColorDragSourceBehavior implementiert ein paar Methoden, die nicht von IDragSource stammen. Die Initialisierungsmethode zum Beispiel registriert einen Handler für mousedown-Ereignisse, damit die Dragquelle „DragDropManager.startDragDrop“ aufrufen kann, um einen Drag & Drop-Vorgang zu beginnen. Die Dispose-Methode hebt die Registrierung des Ereignishandlers auf, um Speicherverluste zu verhindern.
Die IDragSource-Methoden selbst sind recht unkompliziert. Die Methode „get_dragDataType“ gibt die Zeichenfolge „DragDropColor“ zurück, um den Datentyp zu kennzeichnen, den ColorDragSourceBehavior Dropzielen anbietet. In diesem Fall gibt „color data.getDragData“ eine Zeichenfolge zurück, mit der die Farbe definiert wird, die von der Dragquelle dargestellt wird. „get_dragMode“ gibt „Sys.Preview.UI.DragMode.Copy“ zurück, wodurch angegeben wird, dass eine Dragquelle kopiert statt verschoben würde, wenn jetzt ein Ablegen stattfände. (Die Alternative ist Sys.Preview.UI.DragMode.Move, das zusammen mit Sys.Preview.UI.DragMode.Copy in PreviewDragDrop.js definiert ist.)
Ein weiterer Aspekt in ColorDragSourceBehavior, der Beachtung verdient, ist die Verarbeitung von Dragdarstellungen. Der mousedown-Ereignishandler initiiert einen Drag & Drop-Vorgang, indem in DragDropManager startDragDrop aufgerufen wird. Bevor jedoch startDragDrop aufgerufen wird, ruft der Handler cloneNode auf, um das von der Dragquelle repräsentierte DOM-Element zu klonen. Anschließend werden die Undurchsichtigkeit des Knotens auf 40 Prozent gesetzt, der Knoten in das Browser-DOM eingefügt und ein Verweis auf den neuen Knoten als Parameter für startDragDrop an DragDropManager übergeben. DragDropManager übernimmt jetzt die Verantwortung für die Dragdarstellung und animiert ihre Bewegung, damit sie dem Cursor folgt.

Erstellen von Dropzielen
Die ColorDropTargetBehavior-Klasse in ColorDragDrop.js (im Codedownload enthalten) kapselt die Logik ein, mit der DOM-Elemente in Dropziele konvertiert werden. Sie ist von Sys.UI.Behavior abgeleitet, sodass sie an DOM-Elemente angefügt werden kann, und implementiert die IDropTarget-Schnittstelle, sodass sie als Dropziel fungieren kann. In Abbildung 4 sind die Mitglieder von IDropTarget aufgeführt.

Methode Beschreibung
get_dropTargetElement Gibt einen Verweis auf das DOM-Element zurück, das das Dropziel darstellt.
canDrop Gibt „True“ oder „False“ zurück, um anzugeben, ob ein Ablegen akzeptiert würde.
drop Wird aufgerufen, wenn über dem Dropziel ein Ablegen stattfindet.
onDragEnterTarget Wird aufgerufen, wenn ein Cursor mit Nutzlast in das Dropziel eintritt.
onDragInTarget Wird aufgerufen, wenn sich ein Cursor mit Nutzlast im Dropziel bewegt.
onDragLeaveTarget Wird aufgerufen, wenn ein Cursor mit Nutzlast das Dropziel verlässt.
Die onDragEnterTarget- und onDragLeaveTarget-Methoden von ColorDropTargetBehavior führen die zuvor veranschaulichte Hervorhebung des Dropziels durch. Wenn ein Cursor mit Nutzlast in ein Dropziel eintritt, ruft DragDropManager onDragEnterTarget auf. Wenn die Nutzlast den richtigen Typ hat (DragDropColor), speichert onDragEnterTarget die aktuelle Hintergrundfarbe des Ziels in einem Feld und ändert die Hintergrundfarbe in hellgrau. Wenn der Cursor das Dropziel mit der Nutzlast verlässt, ruft DragDropManager die onDragLeaveTarget-Methode des Dropziels auf. Durch Implementierung dieser Methode durch ColorDropTargetBehavior wird die ursprüngliche Hintergrundfarbe des Dropziels wieder hergestellt.
Jedes Mal, wenn ein Cursor mit Nutzlast über das Dropziel bewegt wird, ruft DragDropManager die canDrop-Methode des Dropziels auf, um zu ermitteln, ob das Ziel ein Ablegen akzeptieren würde. ColorDropTargetBehavior.canDrop prüft den Typ der Nutzlast und gibt „True“ zurück, wenn es sich um DragDropColor handelt und „False“, wenn dies nicht der Fall ist. Dieser Prozess ermöglicht der DragDropManager-Klasse, dem Benutzer mithilfe des Cursors das erforderliche visuelle Feedback zur Verfügung zu stellen.
Wenn ein Ablegen stattfindet, wird die Dropmethode des Dropziels aufgerufen. Die ColorDropTargetBehavior.drop-Methode extrahiert die Farbe aus der Dragquelle und legt ihre eigene Hintergrundfarbe dementsprechend fest (tatsächlich die Farbe des DOM-Elements, das als Dropziel dient).
Der dragMode-Parameter, der an die Dropmethode weitergegeben wird, gibt den Dragmodus an, entweder Verschieben oder Kopieren. Letzten Endes liegt es am Dropziel, das DOM des Browsers zu manipulieren, um den Dragmodus anzuerkennen. DragDropDemo.aspx unterstützt nur den Kopiermodus, daher „kopiert“ das Dropziel die Dragquelle, indem es seine eigene Hintergrundfarbe auf die in der Dragquelle enthaltene Farbe einstellt. Wenn der Verschiebemodus ebenfalls unterstützt würde, müsste das Dropziel nach einem erfolgreichen Ablegen den Dragmodus prüfen und dann das DOM-Element löschen (oder neu positionieren), das der Dragquelle zugeordnet wurde, wenn dragMode auf „Sys.Preview.UI.DragMode.Move“ gesetzt wurde.

Erstellen von Dragquellen und Dropzielen
Sobald ColorDragSourceBehavior und ColorDropTargetBehavior implementiert sind, ist das Erstellen von Seiten mit Dragquellen und Dropzielen einfach. In Abbildung 5 sind das relevante Markup und der Code von DragDropDemo.aspx dargestellt.
<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Name="PreviewScript.js"
            Assembly="Microsoft.Web.Preview" />
        <asp:ScriptReference Name="PreviewDragDrop.js"
            Assembly="Microsoft.Web.Preview" />
        <asp:ScriptReference Path="~/Scripts/ColorDragDrop.js" />
    </Scripts>
</asp:ScriptManager>

<fieldset>
    <legend>Pick a Color</legend>
    <table cellpadding="8">
        <tr>
            <!-- Drag sources -->
            <td><div id="RedDragSource"
    style="width: 32px; height: 32px; background-color: red" /></td>
            <td><div id="YellowDragSource"
    style="width: 32px; height: 32px; background-color: yellow" /></td>
            <td><div id="GreenDragSource"
    style="width: 32px; height: 32px; background-color: green" /></td>
            <td><div id="MagentaDragSource"
    style="width: 32px; height: 32px; background-color: magenta" /></td>
            <td><div id="BlueDragSource"
    style="width: 32px; height: 32px; background-color: blue" /></td>
        </tr>
    </table>
</fieldset>

<div style="width: 100%; height: 128px">&nbsp;</div>

<fieldset>
    <legend>Drop It Here</legend>
    <!-- Drop target -->
    <div id="DropTarget" style="width: 100%; height: 196px">
        &nbsp;
    </div>
</fieldset>

<script type="text/javascript">
function pageLoad()
{
    //
    // Make the "DragSource" DIVs drag sources.
    //
    var source1 = new Custom.UI.ColorDragSourceBehavior
        ($get('RedDragSource'), 'red');
    var source2 = new Custom.UI.ColorDragSourceBehavior
        ($get('YellowDragSource'), 'yellow');
    var source3 = new Custom.UI.ColorDragSourceBehavior
        ($get('GreenDragSource'), 'green');
    var source4 = new Custom.UI.ColorDragSourceBehavior
        ($get('MagentaDragSource'), 'magenta');
    var source5 = new Custom.UI.ColorDragSourceBehavior
        ($get('BlueDragSource'), 'blue');

    source1.initialize();
    source2.initialize();
    source3.initialize();
    source4.initialize();
    source5.initialize();

    //
    // Make the "DropTarget" DIV a drop target.
    //
    var target = new Custom.UI.ColorDropTargetBehavior
        ($get('DropTarget'));
    target.initialize();
}
</script>

Die Farbmuster, die als Dragquellen dienen, sind lediglich DIVs, deren Hintergrundfarben als rot, gelb, grün und so weiter eingestellt sind. Die JavaScript-Funktion pageLoad konvertiert die DIVs in Dragquellen, indem fünf ColorDragSourceBehavior-Objekte instanziiert und jedes davon einem der DIVs zugewiesen werden. Die Aufrufe an die Initialisierungsmethoden der Dragquelle geben jeder Dragquelle die Möglichkeit, ihren mousedown-Ereignishandler zu registrieren.
Das Dropziel ist ebenfalls ein DIV. Eine Anweisung instanziiert ein ColorDropTargetBehavior-Objekt und verknüpft es mit dem DIV, um das DIV in ein Dropziel zu konvertieren. Eine zweite Anweisung ruft die Initialisierungsmethode von ColorDropTargetBehavior auf, damit es in DragDropManager als Dropziel registriert wird.
ColorDragSourceBehavior und ColorDropTargetBehavior wurden speziell erstellt, damit Farben gezogen und abgelegt werden können. Sie können ähnliche Klassen erstellen, um andere Drag & Drop-Szenarios zu unterstützen. Stellen Sie sich z. B. vor, Sie erstellen eine Website mit freigegebenen Fotos und möchten den Benutzern ermöglichen, die Fotos durch Ziehen von einem Ordner zu einem anderen zu ordnen. Sie könnten DIVs verwenden, die die Ordner repräsentieren, und eine PhotoDropTargetBehavior-Klasse schreiben, um die DIVs in Dropziele zu konvertieren. Dementsprechend könnten Sie eine PhotoDragSourceBehavior-Klasse erstellen, um DOM-Bildelemente in ziehbare Fotos umzuwandeln. Die von Ihnen erstellten Klassen sind in der Regel sehr anwendungsspezifisch, doch sie folgen alle demselben Muster, das durch die in diesem Artikel dargelegten Klassen für Dragquellen und Dropziele veranschaulicht wird.

Über Drag & Drop hinaus
ASP.NET AJAX ist ein ideales Tool, um Webseiten die Magie von AJAX zu verleihen, und mit der Version ASP.NET AJAX Futures erhält die zentrale Plattform nützliche Verbesserungen. Unterstützung für Drag & Drop-Benutzeroberflächen ist nur ein Beispiel, weitere Beispiele umfassen Animationen, clientseitige Datenbindung und weitere praktische DOM-Abstraktionen. Unabhängig davon, ob diese Features eines Tages in den Kern aufgenommen werden, stehen sie heute bereits zur Verwendung zur Verfügung. Berücksichtigen Sie sie in Ihrer nächsten ASP.NET AJAX-Anwendung, um eine gute Anwendung noch besser zu machen.
Ein weiteres cooles Beispiel für das Hinzufügen von ausgefallenen Animationen zu Webseiten mithilfe von Klassen der Futures-Datei „PreviewGlitz.js“ finden Sie in meinem Blogbeitrag „Erstellen anspruchsvoller Animationen mit der Microsoft AJAX-Bibliothek“ unter wintellect.com/cs/blogs/jprosise/archive/2007/04/04/Creating-Sophisticated-Animations-with-the-Microsoft-AJAX-Library.aspx.

Senden Sie Fragen und Kommentare für Jeff Prosise an  wicked@microsoft.com.


Jeff Prosise schreibt redaktionelle Beiträge für das MSDN Magazin und ist Verfasser mehrerer Bücher wie „Programming Microsoft .NET“ (Microsoft Press, 2002). Er ist außerdem Mitbegründer von Wintellect (www.wintellect.com), einem Unternehmen für Softwareberatung und -schulung, das sich auf Microsoft .NET Framework spezialisiert hat. Sie erreichen Jeff Prosise unter wicked@microsoft.com.

Page view tracker