Kürzlich hatte ich die Idee, ein Android-Spiel zu entwickeln. Zunächst habe ich mich entschieden, Schach zu schreiben. Ich dachte Technik Drag-and-Drop perfekt für die Implementierung des Mechanismus zum Bewegen von Formen. Für die Uneingeweihten merke ich das an Methode ziehen und ablegen Tropfen ist in der Möglichkeit, einige grafische Objekte auf andere zu ziehen und nach dem Loslassen die eine oder andere Aktion auszuführen. Das einfachste Beispiel- Entfernen Sie die Verknüpfung von Ihrem PC-Desktop, indem Sie sie in den Papierkorb ziehen. Indem wir die Verknüpfung in den Papierkorb "werfen", teilen wir dem System mit, dass wir diese beiden Objekte interagieren lassen möchten. Das System empfängt unser Signal und entscheidet, was es tun soll. Drag and Drop ist aufgrund seiner intuitiven Übersichtlichkeit weit verbreitet. Dieser Ansatz wird durch unsere Erfahrung in der Interaktion mit realen Objekten unterstützt und funktioniert hervorragend in einer virtuellen Umgebung. Wie beim Schach ist es mit Drag & Drop technologisch einfacher, die Zelle zu bestimmen, in die der Benutzer die Figur gezogen hat, da es nicht notwendig ist, die Zellennummer aus den Koordinaten des Ablagepunkts zu berechnen. Diese Arbeit wird von der virtuellen Maschine übernommen.

Zwecke der Verwendung der Drag n Drop-Technologie

Mit der Drag-and-Drop-Technologie kann ich drei Probleme mit wenig Blut lösen:

1. Bewegungsvisualisierung. Wenn der Benutzer eine Form berührt und beginnt, sie auf dem Bildschirm zu bewegen, wird die Form durch eine kleinere Zeichnung ersetzt. Somit versteht der Benutzer, dass die Figur erfasst wird.
2. Den Bewegungsbereich der Figur habe ich auf die Maße des Brettes beschränkt.
3. Wenn der Benutzer die Form an der falschen Stelle loslässt, sollte sie in ihre ursprüngliche Position zurückkehren.

Die Aufgaben sind definiert, beginnen wir mit der Umsetzung.

ImageView bei Berührung ersetzen

Alle meine Formen sind ImageView-Objekte. Leider hat sich herausgestellt, dass die Implementierung von Drag & Drop in Android es nicht erlaubt, "out of the box" das Bild eines Objekts zu ersetzen, wenn es berührt wird. Dennoch ist diese Aufgabe mittels der API durchaus lösbar. Wir müssen eine Reihe einfacher Schritte ausführen:

1. Erstellen Sie ein DragShadowBuilder-Objekt.
2. Rufen Sie die startDrag-Methode auf.
3. Blenden Sie unsere ImageView aus, die die Form anzeigt, indem Sie die Methode setVisibility mit dem Parameter View.INVISIBLE aufrufen. Als Ergebnis verbleibt nur das DragShadowBuilder-Objekt auf dem Bildschirm, was dem Benutzer signalisiert, dass die Form erfasst wurde.

Diese Aktionen müssen im OnTouchListner-Handler des ImageView-Objekts implementiert werden. Dazu überschreiben wir die onTouch-Methode:

@Override public boolean onTouch(View view, MotionEvent motionEvent) ( if (motionEvent. getAction() == MotionEvent. ACTION_DOWN) ( ClipData clipData= ClipData. newPlainText("" , "" ) ; View. DragShadowBuilder dsb= new View. DragShadowBuilder (view) ;view.startDrag(clipData, dsb, view, 0 ) ;view.setVisibility(View.INVISIBLE) ; true zurückgeben ; ) else ( false zurückgeben ; ) )

Alles ist sehr einfach. Fahren wir also mit der Ersetzung des Bildes, das herausgefunden wurde, mit der nächsten Aufgabe fort.

Begrenzung des Drag-Bereichs für die Drag-Drop-Funktion

Das Einschränken des Ziehbereichs hängt mit einem Problem zusammen. Tatsache ist, dass das Drop-Ereignis nicht stattfindet, wenn Sie die Form außerhalb des Boards loslassen, da der Benutzer das Objekt an einer leeren Stelle abgelegt hat und das Objekt nichts zu interagieren hat. Infolgedessen kehrt die Figur nicht zu ihrem Original zurück Originalzustand und es wird für immer verborgen bleiben. Ich habe viel Zeit damit verbracht, die Dokumentation zu lesen, aber keine Möglichkeit gefunden, den Ziehbereich von Objekten einzuschränken. Die Offenbarung kam plötzlich. Ich muss den Bereich überhaupt nicht einschränken, ich muss wissen, ob der Benutzer die Figur richtig freigegeben hat oder nicht.

Ermittlung der richtigen Freigabe
Ich habe Antworten auf meine Fragen im Abschnitt „Behandlung von Drag-End-Ereignissen“ auf der Android-Entwickler-Website gefunden. Hier sind ein paar Eckdaten:

1. Wenn der Benutzer das Ziehen beendet hat, wird das Ereignis ACTION_DRAG_ENDED im DragListeners-Handler ausgelöst.
2. In DragListener können Sie mehr bekommen genaue Informationüber den Ziehvorgang durch Aufrufen der Methode DragEvent.getResult().
3. Wenn der DragListener als Antwort auf ein ACTION_DROP-Ereignis „true“ zurückgibt, gibt der getResult-Aufruf ebenfalls „true“ zurück, andernfalls gibt er „false“ zurück.

Also muss ich das Ereignis ACTION_DRAG_ENDED abfangen und die Methode getResult aufrufen. Wenn es false zurückgibt, hat der Benutzer die Form von der Tafel gezogen und ich muss die ImageView sichtbar machen.

@Override public boolean onDrag(View view, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; View dragView= (View) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( containsDragable= false ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( containsDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE) ; ) ) else if (dragAction= = DragEvent. ACTION_DROP& amp;& amp; containsDragable) ( checkForValidMove((ChessBoardSquareLayoutView) view, dragView) ; dragView. setVisibility(View. VISIBLE) ; ) return true ; ) private boolean dropEventNotHandled(DragEvent dragEvent) ( return ! dragEvent. getResult( ) ; )

Jetzt kann der Benutzer die Figur überall freigeben, und nichts Schlimmes wird passieren.

Bestimmung der erlaubten Züge

Der letzte Teil des Artikels widmet sich der Überprüfung der Gültigkeit des Zugs, den der Benutzer auszuführen versucht. Bevor ich dieses Thema im Detail erörtere, möchte ich eine kleine Bemerkung machen, die den Aufbau meiner Anwendung erläutert. Das Schachbrett wird als TableLayout dargestellt, und jede Zelle ist ein Nachkomme eines LinearLayout und hat einen OnDragListener.

Außerdem verweist jeder OnDragListener auf ein „Mediator“-Objekt, das sich um die Interaktion von Spielobjekten kümmert und sich die Position der aktuellen Zelle merkt.

Wenn der Benutzer eine Form über eine Zelle zieht, sind die folgenden Aktionen möglich:

1. Verwenden des Ereignisses ACTION_DRAG_ENTERED, um die Variable „containsDraggable“ auf „true“ zu setzen.
2. Verwenden des Ereignisses ACTION_DRAG_EXITED, um die Variable „containsDraggable“ auf „false“ zu setzen.
3. Verwenden des ACTION_DROP-Ereignisses zum Abfragen der Middleware, ob eine Form in dieser Zelle platziert werden darf.

Unten ist der Code, der die beschriebene Logik implementiert

@Override public boolean onDrag(View view, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; View dragView= (View) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( containsDragable= false ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( containsDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE) ; ) ) else if (dragAction= = DragEvent.ACTION_DROP& amp;& amp; containsDragable) ( checkForValidMove((ChessBoardSquareLayoutView) view, dragView) ; dragView. setVisibility(View. VISIBLE) ; ) return true ; )

Wie Sie sehen, wird ImageView unabhängig davon, ob die Verschiebung gültig ist oder nicht, in den sichtbaren Zustand versetzt. Ich wollte, dass der Benutzer sieht, wie sich die Form bewegt. Weiter oben habe ich erwähnt, dass die Zelle ein untergeordnetes Element von LayoutView ist. Dies geschieht, um das Verschieben der ImageView von Zelle zu Zelle zu vereinfachen. Unten ist der Code für die checkForValidMove-Methode, die zeigt, wie die ImageView verschoben wird.

private void checkForValidMove(ChessBoardSquareLayoutView view, View dragView) ( if (mediator. isValidMove(view) ) ( ViewGroup owner= (ViewGroup) dragView. getParent() ; owner. removeView(dragView) ; view. addView(dragView) ; view. setGravity (Gravity.CENTER) ;view.showAsLanded() ;mediator.handleMove(view) ; ) )

Ich hoffe, dieser Artikel hilft Ihnen bei der Entwicklung Ihrer eigenen Projekte.

Wenn man über die grafische Benutzeroberfläche spricht, kann man nur über die Technologie sprechen Drag-and-Drop(buchstäblich: Ziehen und werfen).

Diese Technologie basiert auf Drag-and-Drop-Elementen GUI von der Quelle zum Empfänger. Die Benutzeroberfläche ist nur mit einer Maus (Touchpad, Trackball) oder einem Touchscreen zugänglich.

Ein ziehbares Element wird mit der Maus gegriffen und gehalten, während es gleichzeitig an eine andere Stelle gezogen wird. Wenn sich die Maus in der richtigen Position befindet, wird die Maustaste losgelassen, wodurch das Objekt freigegeben wird.

Allerdings ist das Drag'n Drop-Interface von Interface-Controls zu unterscheiden, die Methoden in ihren Methoden haben, die für das Verschieben zuständig sind, auf die gleiche Weise implementiert. Beispielsweise kann sich ein Fenster (Formular) auf dem Bildschirm bewegen (durch Ziehen des Titelbereichs). ScrollBox hat einen Scroll-Schieberegler. Aber in beiden Beispielen ist das Ziehen eine (für die Komponente) interne Aktion (Ereignis) und wirkt sich in keiner Weise auf andere Objekte im System aus.

Die Drag-and-Drop-Schnittstelle ist nur anwendbar, um ein Objekt von Container zu Container zu verschieben, selbst wenn die Container heterogen sind. Ziehen Sie beispielsweise eine Datei aus einem Ordner in eine E-Mail.

Drag-and-Drop-Schnittstelle in Webtechnologien

Verwenden von Schnittstellen Drag-and-Drop in Web-Technologien war ein Durchbruch in . Es gibt Offline-Drag-and-Drop-Editoren (z. B. DreamWeaver) und Online-Editoren (z. B. jeden modernen Website-Builder).

Für die VCL-Bibliothek hat Borland eine eigene Version der Drag&Drop-Schnittstelle (übersetzt als „Drag“) implementiert. Diese Schnittstelle ist intern – Sie können alle Delphi-Steuerelemente innerhalb des Formulars senden und empfangen (mit Ausnahme des Formulars selbst). Sie wird ohne Verwendung der entsprechenden Windows-API-Funktionen implementiert – sie müssen verwendet werden, wenn die Kommunikation mit anderen Aufgaben per Drag & Drop organisiert wird .

Klicken linker Knopf Bewegen Sie die Maus über das Steuerelement, können wir es auf ein beliebiges anderes Element "ziehen". Aus der Sicht des Programmierers bedeutet dies, dass in den Momenten des Ziehens und Loslassens der Taste bestimmte Ereignisse generiert werden, die alle notwendigen Informationen übertragen - einen Zeiger auf das gezogene Objekt, aktuelle Cursorkoordinaten usw. Der Ereignisempfänger ist das Element auf dem die dieser Moment der Cursor befindet sich. Der Handler für ein solches Ereignis muss dem System mitteilen, ob das angegebene Steuerelement das "Senden" akzeptiert oder nicht. Wenn die Taste über der Empfängersteuerung losgelassen wird, werden je nach Bereitschaft des Empfängers ein oder zwei weitere Ereignisse ausgelöst.

AbbrechenZiehen Bricht den aktuellen Drag-and-Drop- oder Drag-and-Dock-Vorgang ab.

Funktion FindDragTarget (const Pos: TPoint ;AllowDisabled: Boolean ): TControl ;

Die Funktion gibt ein Objekt der Basisklasse zurück TControl , die sich auf die Bildschirmposition mit den durch den Pos-Parameter angegebenen Koordinaten bezieht. Diese Funktion wird verwendet, um den potenziellen Empfänger einer Drag-and-Drop- oder Drag-and-Dock-Operation zu ermitteln. Wenn für die angegebene Position keine Fenstersteuerung vorhanden ist, kehrt die Funktion zurück Null . Der Parameter AllowDisabled bestimmt, ob deaktivierte Objekte berücksichtigt werden.

Funktion IsDragObject(Sender: TObject ): Boolean ;

Die Funktion bestimmt, ob das im Sender-Parameter angegebene Objekt ein Nachkomme der Klasse ist TDragObject . Diese Funktion kann als Source-Parameter in den Ereignishandlern OnDragOver und OnDockOver verwendet werden, um zu bestimmen, ob das gezogene Objekt akzeptiert wird. Funktionieren auch IsDragObjectkann als Source-Parameter in den Ereignisbehandlungsroutinen OnDragDrop und OnDockDrop verwendet werden, um das gezogene Objekt korrekt zu interpretieren.

DragMode, DragCursor-Eigenschaften, BeginDrag-, OnDragOver-, OnDragDrop-, OnEndDrag-, OnStartDrag-Methoden, Accept-Parameter

Das Ziehen von Informationen von einem Objekt zum anderen mit der Maus ist in Widows weit verbreitet. Sie können Dateien zwischen Ordnern verschieben, Ordner selbst verschieben und vieles mehr.

Alle Eigenschaften, Methoden und Ereignisse, die mit dem Drag-and-Drop-Prozess verbunden sind, werden in der TControl-Klasse definiert, die das übergeordnete Element aller visuellen Delphi-Komponenten ist. Daher sind sie allen Komponenten gemeinsam.

Der Beginn des Ziehens wird durch die DragMode-Eigenschaft bestimmt, die zur Entwurfszeit oder programmgesteuert gleich dmManual oder dmAutomatic festgelegt werden kann. Der Wert von dmAutomatic (automatic) bestimmt den automatischen Start des Ziehvorgangs, wenn der Benutzer mit der Maustaste auf die Komponente klickt. In diesem Fall tritt jedoch das OnMouseDown-Ereignis, das dem Drücken der Maustaste durch den Benutzer zugeordnet ist, für diese Komponente überhaupt nicht auf.

Die Schnittstelle zum Übertragen und Empfangen von Komponenten ist vor langer Zeit erschienen. Es ermöglicht die Interaktion zwischen zwei Steuerelementen während der Anwendungsausführung. In diesem Fall können alle notwendigen Operationen durchgeführt werden. Trotz der Einfachheit der Implementierung und des Entwicklungsalters halten viele Programmierer (insbesondere Anfänger) diesen Mechanismus für obskur und exotisch. Die Verwendung von Drag-and-Drop kann jedoch sehr nützlich und einfach zu implementieren sein. Jetzt werden wir dies überprüfen.

Damit der Mechanismus funktioniert, müssen zwei Steuerungen entsprechend konfiguriert werden. Einer muss die Quelle (Quelle), der zweite - der Empfänger (Ziel) sein. In diesem Fall wandert die Quelle nirgendwo hin, sondern wird nur als solche im Mechanismus registriert.

Glauben Sie mir, es ist einfach genug, sich zu verwandeln X,Y-Koordinaten, die in den Parametern der Ereignisse OnDragOver und OnDragDrop übergeben werden, in Formularkoordinaten.

Arbeiten Sie mit den Left- und Top-Eigenschaften der Komponente, über der sich der Mauszeiger befindet. Ich gebe ein einfaches Beispiel. Platzieren Sie eine Memo-Komponente auf dem Formular und setzen Sie ihre Align-Eigenschaft auf alTop. Platzieren Sie ein Panel auf dem Formular, setzen Sie auch die Align-Eigenschaft auf alTop und die Height-Eigenschaft auf einen kleinen Wert, sagen wir 6 oder 7 Pixel. Setzen Sie DragMode auf dmAutomatica und DragCursor auf crVSplit. Platzieren Sie eine weitere Memo-Komponente und setzen Sie Align auf alClient. Wählen Sie beide Memos gleichzeitig aus, das Bedienfeld, und erstellen Sie einen gemeinsamen OnDragOver-Ereignishandler, wie unten gezeigt:

HTML-Drag-and-Drop Schnittstellen ermöglichen es Anwendungen, Drag-and-Drop-Funktionen in Browsern zu verwenden. Der Benutzer kann auswählen ziehbar Elemente mit einer Maus, ziehen Sie diese Elemente auf a abwerfbar Element und legen Sie sie ab, indem Sie die Maustaste loslassen. Eine durchscheinende Darstellung der ziehbar elements folgt dem Mauszeiger während des Ziehvorgangs.

Für Websites, Erweiterungen und XUL-Anwendungen können Sie anpassen, welche Elemente werden können ziehbar, die Art der Rückmeldung die ziehbar Elemente produzieren, und die abwerfbar Elemente.

Diese Übersicht über HTML Drag & Drop enthält eine Beschreibung der Schnittstellen, grundlegende Schritte zum Hinzufügen von Drag & Drop-Unterstützung zu einer Anwendung und eine Zusammenfassung der Interoperabilität der Schnittstellen.

Ereignisse ziehen

Veranstaltung	Auf Ereignishandler	Feuert, wenn …
ziehen	ziehen	…a gezogenes Element(Element- oder Textauswahl) gezogen wird.
ziehend	andragend	…eine Ziehoperation endet (z. B. das Loslassen einer Maustaste oder das Drücken der Esc-Taste; siehe Einen Drag beenden.)
Schlepper	Aufzieher	…ein gezogenes Element tritt in ein gültiges Drop-Ziel ein. (Sehen Drop-Ziele angeben.)
Dragexit	ondragexit	…ein Element nicht mehr das unmittelbare Auswahlziel des Ziehvorgangs ist.
Schleppblatt	Ondrablatt	…ein gezogenes Element hinterlässt ein gültiges Ablageziel.
drüber ziehen	überziehen	… wird alle paar hundert Millisekunden ein gezogenes Element über ein gültiges Ablageziel gezogen.
Schleppstart	ondragstart	… beginnt der Benutzer, ein Element zu ziehen. (Sehen Starten einer Ziehoperation.)
fallen	fallen	…ein Gegenstand auf ein gültiges Drop-Target fallen gelassen wird. (Sehen Einen Drop ausführen.)

Notiz: Weder Dragstart- noch Dragend-Ereignisse werden ausgelöst, wenn eine Datei vom Betriebssystem in den Browser gezogen wird.

Schnittstellen

Die Grundlagen

Dieser Abschnitt ist eine Zusammenfassung der grundlegenden Schritte zum Hinzufügen von Drag-and-Drop-Funktionen zu einer Anwendung.

erkennen was ist ziehbar

Ein Element machen ziehbar erfordert das Hinzufügen der ziehbar Attribut und die ondragstart globaler Ereignishandler, wie im folgenden Codebeispiel gezeigt:

Dieses Element ist ziehbar.

Weitere Informationen finden Sie unter:

handhabe den Tropfen Wirkung

Der Handler für die fallen event steht es frei, die Drag-Daten anwendungsspezifisch zu verarbeiten.

Typischerweise verwendet eine Anwendung die Daten bekommen()-Methode zum Abrufen von Drag-Elementen und zur entsprechenden Verarbeitung. Darüber hinaus kann sich die Anwendungssemantik je nach Wert von unterscheiden