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
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.
it probably best to use direct html5 spec now
 
  
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.
 
 
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.
 
  
  
Line 45: Line 42:
  
 
</pre>
 
</pre>
 +
 +
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 drap)
 +
(and it works on mobile)
 +
https://codepen.io/VictoriaLa/pen/MWOgYYZ

Revision as of 01:50, 24 January 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 drap) (and it works on mobile) https://codepen.io/VictoriaLa/pen/MWOgYYZ