ListView: drag and drop support with dragEnabled, dropEnabled, remove…

…OnDragDropComplete properties

samples/list-view-drag-and-drop/README.md

@@ -0,0 +1,34 @@
+# Feathers UI List View Drag and Drop
+
+This example app demonstrates how to enable drag and drop between two [`ListView`](https://feathersui.com/learn/haxe-openfl/list-view/) components in a [Feathers UI](https://feathersui.com/) application.
+
+## Live demo
+
+A build of the [_list-view-drag-and-drop_ sample](https://feathersui.com/samples/haxe-openfl/list-view-drag-and-drop/) is hosted on the Feathers UI website, and it may be viewed in any modern web browser.
+
+## Run locally
+
+This project includes an [_project.xml_](https://lime.software/docs/project-files/xml-format/) file that configures all options for [OpenFL](https://openfl.org/). This file makes it easy to build from the command line, and many IDEs can parse this file to configure a Haxe project to use OpenFL.
+
+### Prerequisites
+
+- [Install Haxe 4.0.0 or newer](https://haxe.org/download/)
+- [Install Feathers UI from Haxelib](https://feathersui.com/learn/haxe-openfl/installation/)
+
+### Command Line
+
+Run the [**openfl**](https://www.openfl.org/learn/haxelib/docs/tools/) tool in your terminal:
+
+```sh
+haxelib run openfl test html5
+```
+
+In addition to `html5`, other supported targets include `windows`, `mac`, `linux`, `android`, and `ios`. See [Lime Command Line Tools: Basic Commands](https://lime.software/docs/command-line-tools/basic-commands/) for complete details about the available commands.
+
+### Editors and IDEs
+
+Check out the following tutorials for creating Feathers UI projects in popular development environments:
+
+- [HaxeDevelop](https://feathersui.com/learn/haxe-openfl/haxedevelop/)
+- [Moonshine IDE](https://feathersui.com/learn/haxe-openfl/moonshine-ide/)
+- [Visual Studio Code](https://feathersui.com/learn/haxe-openfl/visual-studio-code/)

samples/list-view-drag-and-drop/project.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<project>
+	<meta title="ListView Drag and Drop" package="com.feathersui.samples.ListViewDragAndDrop" version="1.0.0" company="Bowler Hat LLC"/>
+	<meta title="Drag and drop between two ListView components — Feathers UI Samples" if="html5"/>
+	<app main="Main" file="ListViewDragAndDrop"/>
+
+	<window allow-high-dpi="true"/>
+	<window fps="60"/>
+	<window fps="0" if="html5"/>
+	<window background="#F8F8F8"/>
+
+	<source path="src"/>
+
+	<haxelib name="openfl"/>
+	<haxelib name="actuate"/>
+	<haxelib name="feathersui"/>
+
+	<haxedef name="feathersui_theme_manage_stage_color"/>
+
+	<assets id="feathersui-logo" path="assets/img/feathersui-logo.png" embed="false"/>
+	<icon path="assets/icons/feathersui-icon.svg"/>
+</project>

samples/list-view-drag-and-drop/src/Main.hx

@@ -0,0 +1,105 @@
+import feathers.layout.HorizontalLayoutData;
+import feathers.layout.HorizontalLayout;
+import feathers.controls.Header;
+import openfl.events.Event;
+import feathers.data.ArrayCollection;
+import feathers.controls.PopUpListView;
+import feathers.controls.ListView;
+import feathers.layout.AnchorLayoutData;
+import feathers.layout.AnchorLayout;
+import feathers.controls.Panel;
+import feathers.controls.LayoutGroup;
+import feathers.controls.Application;
+import com.feathersui.controls.PoweredByFeathersUI;
+
+class Main extends Application {
+	public function new() {
+		super();
+
+		// just some bootstrapping code for our app
+		this.initializeView();
+
+		this.listView1 = new ListView();
+		this.listView1.dataProvider = new ArrayCollection([
+			{text: "One"},
+			{text: "Two"},
+			{text: "Three"},
+		]);
+		this.listView1.itemToText = (item:Dynamic) -> {
+			return item.text;
+		};
+		// allow items to be dragged from this list view
+		this.listView1.dragEnabled = true;
+		// if they are successfully dropped on the other list view,
+		// the items will be removed from this list view's data provider
+		this.listView1.removeOnDragDropComplete = true;
+		this.listView1.layoutData = HorizontalLayoutData.fill();
+		this.view.addChild(this.listView1);
+
+		this.listView2 = new ListView();
+		this.listView2.dataProvider = new ArrayCollection([
+			{text: "One"},
+			{text: "Two"},
+			{text: "Three"},
+			{text: "Four"},
+			{text: "Five"},
+			{text: "Six"},
+			{text: "Seven"},
+			{text: "Eight"},
+			{text: "Nine"},
+			{text: "Ten"},
+		]);
+		this.listView2.itemToText = (item:Dynamic) -> {
+			return item.text;
+		};
+		// allow items from the other list view to be dropped on this one
+		this.listView2.dropEnabled = true;
+		this.listView2.layoutData = HorizontalLayoutData.fill();
+		this.view.addChild(this.listView2);
+	}
+
+	private var listView1:ListView;
+	private var listView2:ListView;
+	private var view:Panel;
+
+	private function initializeView():Void {
+		this.layout = new AnchorLayout();
+
+		this.view = new Panel();
+		this.view.layoutData = AnchorLayoutData.fill();
+
+		var header = new Header();
+		header.text = "Drag and Drop";
+		this.view.header = header;
+
+		var footer = new LayoutGroup();
+		footer.variant = LayoutGroup.VARIANT_TOOL_BAR;
+		footer.layout = new AnchorLayout();
+		var poweredBy = new PoweredByFeathersUI();
+		poweredBy.layoutData = AnchorLayoutData.center();
+		footer.addChild(poweredBy);
+		this.view.footer = footer;
+
+		this.view.layout = new HorizontalLayout();
+		this.addChild(this.view);
+	}
+}
+
+/**
+	A custom class to hold data for the PopUpListView where the user chooses how
+	the ListView data provider should be sorted.
+**/
+class SortItem {
+	public function new(text:String, sortCompareFunction:(Dynamic, Dynamic) -> Int) {
+		this.text = text;
+		this.sortCompareFunction = sortCompareFunction;
+	}
+
+	public var text:String;
+	public var sortCompareFunction:(Dynamic, Dynamic) -> Int;
+
+	@:keep
+	public function toString():String {
+		return this.text;
+	}
+}

samples/list-view-drag-and-drop/src/com/feathersui/controls/PoweredByFeathersUI.hx

@@ -0,0 +1,65 @@
+/*
+	Copyright 2024 Bowler Hat LLC. All Rights Reserved.
+
+	This program is free software. You can redistribute and/or modify it in
+	accordance with the terms of the accompanying license agreement.
+ */
+
+package com.feathersui.controls;
+
+import openfl.net.URLRequest;
+import openfl.Lib;
+import openfl.events.MouseEvent;
+import feathers.controls.Label;
+import feathers.controls.AssetLoader;
+import feathers.layout.HorizontalLayout;
+import feathers.controls.LayoutGroup;
+import feathers.controls.TextCallout;
+
+/**
+	Displays the Feathers UI logo and links to feathersui.com
+**/
+class PoweredByFeathersUI extends LayoutGroup {
+	public function new() {
+		super();
+
+		var layout = new HorizontalLayout();
+		layout.verticalAlign = MIDDLE;
+		this.layout = layout;
+
+		this.buttonMode = true;
+		this.useHandCursor = true;
+		this.mouseChildren = false;
+
+		var label = new Label();
+		label.text = "Powered by ";
+		this.addChild(label);
+
+		this.icon = new AssetLoader();
+		// <assets id="feathersui-logo" path="assets/img/feathersui-logo.png" embed="false"/>
+		this.icon.source = "feathersui-logo";
+		this.icon.height = 16.0;
+		this.addChild(this.icon);
+
+		this.addEventListener(MouseEvent.ROLL_OVER, poweredBy_rollOverHandler);
+		this.addEventListener(MouseEvent.ROLL_OUT, poweredBy_rollOutHandler);
+		this.addEventListener(MouseEvent.CLICK, poweredBy_clickHandler);
+	}
+
+	private var icon:AssetLoader;
+	private var callout:TextCallout;
+
+	private function poweredBy_rollOverHandler(event:MouseEvent):Void {
+		this.callout = TextCallout.show("Learn more at feathersui.com", this.icon, null, false);
+	}
+
+	private function poweredBy_rollOutHandler(event:MouseEvent):Void {
+		if (this.callout != null) {
+			this.callout.close();
+		}
+	}
+
+	private function poweredBy_clickHandler(event:MouseEvent):Void {
+		Lib.navigateToURL(new URLRequest("https://feathersui.com/"), "_blank");
+	}
+}