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
(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...")
 
No edit summary
 
(4 intermediate revisions by 2 users not shown)
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.
 
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>
 
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
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
[[Category:Studio]]

Latest revision as of 00:26, 17 May 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