A Neutron.ahk app to test DOM DragEvent

DOM DragEvent Test.ahk

/*
	This example is designed to show how to use the default Neutron template
	page. Because it uses the default template, it is also the simplest example
	to use and tweak as a beginner.
	
	It is also designed to show how you would apply your own theming to the
	template without having to modify it directly, by applying CSS styling to
	the built-in template title bar elements.
*/

#NoEnv
SetBatchLines, -1
CoordMode, Mouse, Screen

; Include the Neutron library
#Include ../Neutron.ahk

; adapted from snippets at MDN
; ref: https://developer.mozilla.org/en-US/docs/Web/API/Document/drag_event
html =
( ; html
	<div class="dropzone">
	  <div id="draggable" draggable="true" ondragstart="">
		This div is draggable
	  </div>
	</div>
	<div class="dropzone"></div>
	<div class="dropzone"></div>
	<div class="dropzone"></div>
)

css =
( ; css
	body {
	/* Prevent the user selecting text in the example */
	user-select: none;
	}
	
	#draggable {
	width: 200px;
	height: 20px;
	text-align: center;
	background: white;
	}
	
	.dropzone {
	width: 200px;
	height: 20px;
	background: blueviolet;
	margin-bottom: 10px;
	padding: 10px;
	}
)

js =
( ; js
	var dragged;
	
	/* events fired on the draggable target */
	document.addEventListener("drag", function(event) {
	
	}, false);
	
	document.addEventListener("dragstart", function(event) {
	// event.dataTransfer.setData('text/plain',null)
	// store a ref. on the dragged elem
	dragged = event.target;
	// make it half transparent
	event.target.style.opacity = 0.5;
	}, false);
	
	document.addEventListener("dragend", function(event) {
	// reset the transparency
	event.target.style.opacity = "";
	}, false);
	
	/* events fired on the drop targets */
	document.addEventListener("dragover", function(event) {
	// prevent default to allow drop
	event.preventDefault();
	}, false);
	
	document.addEventListener("dragenter", function(event) {
	// highlight potential drop target when the draggable element enters it
	if (event.target.className == "dropzone") {
		event.target.style.background = "purple";
	}
	
	}, false);
	
	document.addEventListener("dragleave", function(event) {
	// reset background of potential drop target when the draggable element leaves it
	if (event.target.className == "dropzone") {
		event.target.style.background = "";
	}
	
	}, false);
	
	document.addEventListener("drop", function(event) {
	// prevent default action (open as link for some elements)
	event.preventDefault();
	// move dragged elem to the selected drop target
	if (event.target.className == "dropzone") {
		event.target.style.background = "";
		dragged.parentNode.removeChild( dragged );
		event.target.appendChild( dragged );
	}
	}, false);
)

title = Neutron Template Example

; Create a Neutron Window with the given content and save a reference to it in
; the variable `neutron` to be used later.
neutron := new NeutronWindow(html, css, js, title)

; Use the Gui method to set a custom label prefix for GUI events. This code is
; equivalent to the line `Gui, name:+LabelNeutron` for a normal GUI.
neutron.Gui("+LabelNeutron")

; Show the GUI, with an initial size of 640 x 480. Unlike with a normal GUI
; this size includes the title bar area, so the "client" area will be slightly
; shorter vertically than if you were to make this GUI the normal way.
neutron.Show("w640 h480")

; Set up a timer to demonstrate making dynamic page updates every so often.
SetTimer, DynamicContent, 100
return

; The built in GuiClose, GuiEscape, and GuiDropFiles event handlers will work
; with Neutron GUIs. Using them is the current best practice for handling these
; types of events. Here, we're using the name NeutronClose because the GUI was
; given a custom label prefix up in the auto-execute section.
NeutronClose:
ExitApp
return


Clicked(neutron, event)
{
	; event.target will contain the HTML Element that fired the event.
	; Show a message box with its inner text.
	MsgBox, % "You clicked: " event.target.innerText
}

Submitted(neutron, event)
{
	; Some events have a default action that needs to be prevented. A form will
	; redirect the page by default, but we want to handle the form data ourself.
	event.preventDefault()
	
	; Dismiss the GUI
	neutron.hide()
	
	; Use the GetFormData helper to get an associative array of the form data
	formData := neutron.GetFormData(event.target)
	MsgBox, % "Hello " formData.firstName " " formData.lastName "!"
	
	; Re-show the GUI
	neutron.Show()
}

DynamicContent()
{
	; This function isn't called by Neutron, so we'll have to grab the global
	; Neutron window variable instead of using one from a Neutron event.
	global neutron
	
	; Get the mouse position
	MouseGetPos, x, y
	
	; Update the page with the new position
	neutron.doc.getElementById("ahk_x").innerText := x
	neutron.doc.getElementById("ahk_y").innerText := y
}