click on the title, hold and drag
Closed this issue · 32 comments
In our old vue2 dialog we had an interesting feature which was to click on the title of the dialog, hold and drag it to move on the screen. Would it be complicated to implement?
Hello. Interesting idea! I think this would be a cool feature of this library. Maybe I’ll make a prototype by the weekend, I need to think about how to allow dragging (I’ll see how it was done in Vue 2, if you have examples, I’ll be glad).
I think I can handle it in a couple of days.
A little experiment on binding pointermove
and changing the window position:
Cool! If it helps with the above we use:
"vue-js-modal": "2.0.1",
and had this feature.
https://github.com/euvl/vue-js-modal
https://euvl.github.io/vue-js-modal/Properties.html#properties-2
It would be a draggable option
Hello Jenesius, how are you?
Have you taken a look at the possibility?
Hello, I forgot about this task a little...
In version 1.11.2
the draggable
parameter was added, which accepts either a Boolean or a string value.
Move by clicking anywhere in the window:
openModal(ModalInfo, {info: "test"}, {
draggable: true
})
Draggable using css class:
openModal(ModalInfo, {info: "test"}, {
draggable: '.modal-header'
})
Draggable using css ID:
openModal(ModalInfo, {info: "test"}, {
draggable: '#modal-header'
})
I assume that I will have to make more changes, but this concept will not change anymore, so it can be safely used. You can also pass draggable in 'config', which will be installed by default for everyone.
Thank you very much! Tomorrow I'll be able to do a test and give you feedback.
But 99% of my case is with pushModal and not openModal, will it work? I believe this configuration in config is much better in my case.
Thank you!
Absolutely, pushModal and openModal are identical in terms of use. If you look inside, openModal uses pushModal to open a modal window. So the next code also will work:
pushModal(ModalInfo, {info: "test"}, {
draggable: '#modal-header'
})
Jenesius, I don't know where I'm going wrong but this call correctly opens a dialog, I just added the draggable but it just doesn't work... updated to 1.11.2
await pushModal(modalComponent, propsRepassar, { draggable: true })
@rmp1985, Please tell me which browser and which version you are using? For this feature I use addEventListener('pointerdown') and it has full browser support. And after trying to move the modal window, does it close? You can also see if the transfrom properties are added to css (as in the picture)
I'm using Google Chrome Version 124.0.6367.208 (Official version) 64 bits
But maybe I'm doing something wrong... but the transform really isn't showing up
When I click on the dialog nothing happens (it doesn't close) it's as if draggable had no effect.
Please show me what the html structure looks like a little higher, above the span
. I see that you have two nested spans and then a div/div.
Thnx, i will check this zip today!
Let's continue. Transform is not set upon initialization. It appears when the block is moved. As I understand it, even after trying to drag and drop, nothing works.
I'll add debug in the new version, let's try to figure out exactly where it doesn't work.
ok thank you very much, I'm waiting for the version
Hmm, did I understand correctly that even when passing true, it writes that draggable item not found?
That's right! Sending true, or a class the result is the same.
Can you update to 1.11.4.
Now logs will contains the selector. Also I add setTimeout, maybe it will resolve the problem...
And try send me logs from console again.
In the future modalid will have a normal form, let's leave it like that for now)
This looks very intriguing.
If you run document.querySelector('[modalid=_ modal _0]') in the console, will the result show html or not (Example on the screenshot)?
At the moment I have two guesses:
- Perhaps v-if is present on the modal window, which is why it does not appear immediately but with a delay. Because of this, at the time of initialization the html block does not yet exist.
- The modal component has several root nodes and because of this modalid does not work. Although you have all the parameters displayed in the screenshot. So this point disappears.
Inside the library it looks like this:
const draggableSelector = typeof modal.draggable === 'string' ? modal.draggable : `[modalid=_modal_${props.id}]`
debug(`The modal window is movable(${draggableSelector}).`)
addDraggable(document.querySelector(draggableSelector))
We need to understand why document.querySelector(draggableSelector)
returns null
hmm, this all looks wrong. I'm working now and will post a new version covered with tests.
Try updating to version 1.11.5.
And repeat the experience.
This may not solve the problem, but we will understand what the problem may be. Update to 1.11.6.
Also try running this code:
await pushModal(.......);
document.querySelector(`[modalid=_modal_0]`);
If that doesn't work, then this one will. This way we will understand at what point the window becomes available in your code. You can play with the timeout value:
const timeout = 50;
let attemp = 0;
await pushModal(.......);
fn();
functon fn() {
const elModal = document.querySelector(`[modalid=_modal_0]`);
if (!elModal) {
console.log(`Attemp ${attemp} failed.`);
attemp++;
setTimeout(fn, timeout);
} else console.log('Modal founded`);
}
Can you show the modalComponent
, how its look inside.
Jenesius I thank you for now. But I'm returning to version 1.11.1 because I need to go to production. I saw that in addition to not working, this new draggrable parameter had a detrimental effect on the mobile version. As it is something simple but needs to be very well tested, I thought it was risky to put something like this up at the moment.