This is a documentation for Board Game Arena: play board games online !

Draggable: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
No edit summary
 
(3 intermediate revisions by 2 users not shown)
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


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


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

Latest revision as of 02:17, 25 September 2024

Draggable is the component that supports drag and drop.

This is example on how to use this with stock, see full implementation in "sharedcode" game in bga.


		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;
		},

Modern alternatives

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

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