click on the title, hold and drag

[rmp1985]

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?

[Jenesius]

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:

[rmp1985]

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

[rmp1985]

Hello Jenesius, how are you?

Have you taken a look at the possibility?

[Jenesius]

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'
})

[Jenesius]

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.

[rmp1985]

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.

[Jenesius]

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'
})

[rmp1985]

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 })

[Jenesius]

@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)

[rmp1985]

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.

[rmp1985]

[Jenesius]

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.

[rmp1985]

Jenesius, thank you for your patience.

Follow my html

I had to attach it in a zip

div.zip

[Jenesius]

Thnx, i will check this zip today!

[Jenesius]

I just pasted the html into the component: But there is one thing: as you can see in the picture, transform is set to the first element inside the container. Do you experience the same behavior again or not?

[rmp1985]

Initially it does not contain this transform element in the first span

And loading... with for example: await pushModal(modalComponent, propsRepassar, { draggable: true })

Fica assim:

[Jenesius]

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.

[rmp1985]

ok thank you very much, I'm waiting for the version

[Jenesius]

Update to 1.11.3, then run your application with DEBUG=jenesius-vue-modal* For my application i use localStorage: Also put on Verbose: In result is should looks like

[rmp1985]

Jenesius, does this help or do you need any more information?

[Jenesius]

Hmm, did I understand correctly that even when passing true, it writes that draggable item not found?

[rmp1985]

That's right! Sending true, or a class the result is the same.

[Jenesius]

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.

[rmp1985]

Track results with class .app-dialog

Track results with true

is to sit and cry

[Jenesius]

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:

1. 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.
2. 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

[Jenesius]

hmm, this all looks wrong. I'm working now and will post a new version covered with tests.

[Jenesius]

Try updating to version 1.11.5. And repeat the experience.

[rmp1985]

let's go!

I analyzed my code and removed all v-ifs;

I tested with true and with class but unfortunately without a positive result yet;

My interest is that the .app-dialog-header class is draggable

[Jenesius]

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`);
}

[rmp1985]

Result:

At first opening around 5ms and then around 1ms...

But the library never finds...

QuerySelect always finds

[Jenesius]

Can you show the modalComponent, how its look inside.

[rmp1985]

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.