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