-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
original DragEvent not passed to gridstack dropped event (no access to dataTransfer property) #1817
Comments
can this be passed and be the same API for H5 and Jquery ? (raw event or something as they are different). Please make a code suggestion if you can, or donate for me to take a look... thanks. |
Problem is with H5. For Jquery it looks ok. gridstack.js/src/gridstack-dd.ts Line 280 in 72d8239
where to gridstack dropped event handler you passing new Event object which contains ONLY type property. But it should contains all info from original drag event, as in other case we loosing all informations. So simple solution is to replace this line: Example of usage after this change:
const test = document.createElement('div');
test.className = 'xxx';
const testContent = document.createElement('div');
testContent.className = 'xxxContent';
testContent.innerText = 'ANY WIDGET';
test.appendChild(testContent);`
const _ddElement = DDElement.init(test);
_ddElement.setupDraggable({
handle: '.xxx',
revert: 'invalid',
scroll: true,
appendTo: 'body',
helper: 'clone',
start: (event: DragEvent) => {
if (event.dataTransfer) {
event.dataTransfer.setData('text/plain', 'BINGO');
}
},
});
grid.on('dropped', this.gridStackDropped.bind(this));
gridStackDropped(event: Event, previousWidget: GridStackNode, newWidget: GridStackNode): void {
const dragEvent = event as DragEvent;
if (dragEvent.dataTransfer) {
console.log('gridstack dropped: ', dragEvent.dataTransfer.getData('text/plain'));
}
} Then you will see that now we are able to read info from dataTransfer property. |
(fixed your code formatting) Hey thanks for the code fix. mind making a changelist with the fixes and ideally a way to test/verify this (you can change one of the demo or unit testing (still have not figure out how to enable the browser gestures ones). The downside is that 2. won't be the same for JQ version since you are assuming an event type, AND the fact it will break if/when I convert the H5 code to use plain mousedown/touch events as draggable has many issues and doesn't work on mobile either... |
I showed you example in case of using H5 as we are using this version and not using jquery. If you want you could create you own let say GridstackEvent interface, where you can put type, dataTransfer and anything else required for gridstack event handlers. Like for example:
Then in line 280 of gridstack-dd.ts you can pass whats needed. Then dropped handler implementation will look like for example:
|
Hi @adumesny, I am a colleague of @zgilewski, just following up on this issue. Is the code fix suggested by @zgilewski sufficient for a PR? If it is, we can proceed with creating the PR for your review. |
@onepartsam @zgilewski the code change is trivial of course - a PR would be nice so you get the credit, but I was hoping for a running example showing the usage as well (either modify a current example, or create a new one) if this is generally useful. thanks |
in new release. thanks |
In griddstack 'dragged' event, we dont have access to original DragEvent, which making impossible to access dataTransfer property of DragEvent.
Gridstack version 4.0.1
We expecting that in 'dragged' event we can access original DragEvent from which we can access dataTransfer property, which will allow us to update widget content basing on data taken from dataTransfer property.
Actually its not possible.
The text was updated successfully, but these errors were encountered: