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

Difference between revisions of "Draggable"

From Board Game Arena
Jump to navigation Jump to search
m (typo: drap -> drop)
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

Revision as of 22:35, 12 February 2022

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

Draggable 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

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 https://codepen.io/VictoriaLa/pen/rNGXKxj


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