This is a documentation for Board Game Arena: play board games online !
Draggable: Difference between revisions
JoeProgram (talk | contribs) m (typo: drap -> drop) |
Victoria La (talk | contribs) No edit summary |
||
| 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]] | |||
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