Draggable - Revision history

Thoun at 09:54, 16 December 2025

2025-12-16T09:54:56Z

← Older revision		Revision as of 11:54, 16 December 2025
Line 5:		Line 5:

	<pre>		<pre>
	createMyDraggableInStock~~: function~~(targetDivId, allDragTargets) {		createMyDraggableInStock(targetDivId, allDragTargets) {
	var draggableObj = new ebg.draggable();		var draggableObj = new ebg.draggable();
	draggableObj.create(this, targetDivId, targetDivId);		draggableObj.create(this, targetDivId, targetDivId);
Line 39:		Line 39:
	});		});
	return draggableObj;		return draggableObj;
	},		}

	</pre>		</pre>

Victoria La: /* Modern alternatives */

2024-09-25T01:17:17Z

Modern alternatives

← Older revision		Revision as of 03:17, 25 September 2024
Line 56:		Line 56:
	** game: Patchwork		** game: Patchwork

			Common drag and drop problems: https://www.codemzy.com/blog/drag-and-drop-bug-fixes

	[[Category:Studio]]		[[Category:Studio]]

Victoria La at 00:34, 25 September 2024

2024-09-25T00:34:23Z

← Older revision		Revision as of 02:34, 25 September 2024
Line 42:		Line 42:

	</pre>		</pre>

			== Modern alternatives ==

	Draggable it was created long time ago when HTML5 did not have such support,		Draggable it was created long time ago when HTML5 did not have such support,
	it probably best to use direct html5 spec now		it probably best to use direct html5 spec now

	https://~~developer~~.~~mozilla.org~~/~~en-US~~/~~docs~~/~~Web/API/HTML_Drag_and_Drop_API~~		* Use pointer events Pointer Events API
			** code pen https://codepen.io/VictoriaLa/pen/MWOgYYZ (works on mobile also)
			** game: Century

	~~There is example fiddle but as now~~ it does not work on Mobile browsers and Chrome does not fire most of the events as of now		* Use native drag and drop HTML Drag and Drop
	~~https~~:~~//codepen.io/VictoriaLa/pen/rNGXKxj~~		** code pen https://codepen.io/VictoriaLa/pen/rNGXKxj (it does not work on Mobile browsers and Chrome does not fire most of the events as of now)
			** game: Patchwork


	~~The following example is similar to what Draggable is doing by using modern pointermove event (but not drag and drop)~~
	~~(and it works on mobile)~~
	~~https://codepen.io/VictoriaLa/pen/MWOgYYZ~~

	[[Category:Studio]]		[[Category:Studio]]

Victoria La at 23:26, 16 May 2022

2022-05-16T23:26:35Z

← Older revision		Revision as of 01:26, 17 May 2022
Line 55:		Line 55:
	(and it works on mobile)		(and it works on mobile)
	https://codepen.io/VictoriaLa/pen/MWOgYYZ		https://codepen.io/VictoriaLa/pen/MWOgYYZ

			[[Category:Studio]]

JoeProgram: typo: drap -> drop

2022-02-12T20:35:07Z

typo: drap -> drop

← Older revision		Revision as of 22:35, 12 February 2022
Line 52:		Line 52:


	The following example is similar to what Draggable is doing by using modern pointermove event (but not drag and ~~drap~~)		The following example is similar to what Draggable is doing by using modern pointermove event (but not drag and drop)
	(and it works on mobile)		(and it works on mobile)
	https://codepen.io/VictoriaLa/pen/MWOgYYZ		https://codepen.io/VictoriaLa/pen/MWOgYYZ

Victoria La at 23:50, 23 January 2022

2022-01-23T23:50:21Z

@@ Line 1: / Line 1: @@
-Draggable is the component that supports drag and drop, however it was created long time ago when HTML5 did not have such support,
+Draggable is the component that supports drag and drop.
-https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
+This is example on how to use this with stock, see full implementation in "sharedcode" game in bga.
@@ Line 45: / Line 42: @@
 </pre>

Victoria La at 03:31, 18 January 2021

2021-01-18T03:31:50Z

← Older revision		Revision as of 05:31, 18 January 2021
Line 1:		Line 1:
	Draggable is the component that supports ~~drug~~ and drop, however it was created long time ago when HTML5 did not have such support,		Draggable is the component that supports drag and drop, however it was created long time ago when HTML5 did not have such support,
	it probably best to use direct html5 spec now		it probably best to use direct html5 spec now

Victoria La at 20:16, 23 December 2020

2020-12-23T20:16:57Z

← Older revision		Revision as of 22:16, 23 December 2020
Line 3:		Line 3:

	https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API		https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

			However if you still interested in bga draggable this is example on how to use this with stock, see full implementation in "sharedcode" game in bga.


			<pre>
			createMyDraggableInStock: function(targetDivId, allDragTargets) {
			var draggableObj = new ebg.draggable();
			draggableObj.create(this, targetDivId, targetDivId);

			dojo.connect(draggableObj, 'onStartDragging', this, (item_id, left, top) => {
			//console.log("onStart", item_id, left, top);
			});
			dojo.connect(draggableObj, 'onDragging', this, (item_id, left, top, dx, dy) => {
			//console.log("onDrag", item_id, left, top, dx, dy);
			var targetParent = this.getDragTarget(item_id, allDragTargets, left, top);
			if (targetParent) {
			dojo.query(".drag_target_hover").removeClass("drag_target_hover");
			dojo.addClass(targetParent, "drag_target_hover");
			}

			});
			dojo.connect(draggableObj, 'onEndDragging', this, (item_id, left, top, bDragged) => {
			if (!bDragged) return;
			//console.log("onDrop", item_id, left, top, bDragged);
			var targetParent = this.getDragTarget(item_id, allDragTargets, left, top);
			const fromstock = this.getStockSourceByDivId(item_id);
			const cardId = this.getStockCardIdByDivId(item_id);
			const tostock = this.getStockByTargetId(targetParent);
			if (tostock && tostock != fromstock) {
			var cardType = fromstock.getItemTypeById(cardId);
			tostock.addToStockWithId(cardType, cardId);
			fromstock.removeFromStockById(cardId);
			} else {
			fromstock.resetItemsPosition();
			}

			dojo.query(".drag_target_hover").removeClass("drag_target_hover");
			});
			return draggableObj;
			},

			</pre>

Victoria La: Created page with "Draggable is the component that supports drug and drop, however it was created long time ago when HTML5 did not have such support, it probably best to use direct html5 spec no..."

2020-12-23T18:50:59Z

Created page with "Draggable is the component that supports drug and drop, however it was created long time ago when HTML5 did not have such support, it probably best to use direct html5 spec no..."

New page

Draggable is the component that supports drug and drop, however it was created long time ago when HTML5 did not have such support,
it probably best to use direct html5 spec now

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API