When the Target "Text" is in editable mode then movable not work.

[AkashTvu]

Environments

• Framework name: vue js
• Framework version: vue 2.0
• Moveable Component version: ^2.0.0-beta.2
• Testable Address(optional):

Description

I have a target div and there is a text and when i edit this text by contentEditable="true" then "Movable" draging not work.

[AishwaryaMurade]

Same issue with me

[daybrush]

@AkashTvu @AishwaryaMurade

• croact-moveable 0.3.1
• @moveable/helper 0.1.2
• lit-moveable 0.24.0
• moveable 0.47.1
• preact-moveable 0.49.1
• react-moveable 0.50.1
• svelte-moveable 0.39.1
• vue-moveable 2.0.0-beta.67
• vue3-moveable 0.22.1
• ngx-moveable 0.44.1

moveable's new version is released.

dragFocusedInput prop is added. Try set dragFocusedInput to true.

[AkashTvu]

@daybrush I tried to use it with vue-movable but still not working.

[daybrush]

@AkashTvu

Here is the example code. Dragging is possible even when the input is focused.

https://codesandbox.io/s/serverless-cdn-w53j2t?file=/src/App.vue

[AkashTvu]

@daybrush I am not able to open the above link of codesanbox code. Please help

[daybrush]

@AkashTvu

Oh sorry. changed to public.

https://codesandbox.io/s/serverless-cdn-w53j2t?file=/src/App.vue

[AkashTvu]

@daybrush I saw the code but still there is two problems:

1. Unable to type in input box.
2. As is mentioned in the issue description we are using a div with contentEditable="true" not an input box

Description : "I have a target div and there is a text and when i edit this text by contentEditable="true" then "Movable" draging not work."

[daybrush]

@AkashTvu

moveable's new version is released. Issues 1 and 2 were resolved. Check it again.

[AkashTvu]

@daybrush Still not able to see fix. unable to edit and typing the Input box for version "vue-moveable": "2.0.0-beta.63"

[AishwaryaMurade]

Hi @daybrush can you please share the example code with fix for this issue for Reactjs as well? It will be helpful. I am also using a div with contentEditable="true"

[daybrush]

@AkashTvu @AishwaryaMurade

moveable's new version is released. Codesandbox has also been updated.

https://codesandbox.io/s/serverless-cdn-w53j2t?file=/src/App.vue

See example (other frameworks):

https://daybrush.com/moveable/storybook/?path=/story/options--options-drag-focused-input

[AkashTvu]

https://user-images.githubusercontent.com/69041155/236893627-9f6c98f9-a0bb-43d3-af68-ec66d449a352.mp4

See still i am not able to type anything in inputbox

[daybrush]

@AkashTvu

1. checkInput: true disables moveable on input.
2. dragFocusedInput: true enable moveable on the focused input.
3. checkInput: false, dragFcousedInput: false enable on input, disable on focused input.

[AkashTvu]

@daybrush I tried this props with my code and found still some problem that on first time page load it is editing perfectly but when i moved the text then i could not edit the text again.

https://user-images.githubusercontent.com/69041155/237027078-1d221f1d-4b62-4c85-a956-53d1e3efe272.mp4

[daybrush]

@AkashTvu

If you use dragFocusedInput, it works like a video and code sandbox.

e.isDouble exists in moveable's click event.

If you double click, focus the target.

[jadiagaurang]

@daybrush I am using Selecto to select Moveable Targets for my implementation!

I have used following config for the MoveableRef.

var MoveableRef = new Moveable(me.canvasContainer, {
    target: [],

    // To Move
    draggable: true,

    // For contenteditable="true"
    checkInput: true,
    // https://github.com/daybrush/moveable/issues/896
    dragFocusedInput: false
});

How should I implement e.isDouble check for the selection event on the contenteditable Target.

I would like to allow the Users to Drag an element on the first click. If user click again on the selected element then allow them to edit the text.

Here is my Selecto Ref and Event Binding.

var SelectoRef = new Selecto({
    container: me.canvasContainer,
    dragContainer: me.canvasContainer,
    selectableTargets: [".el-wrapper"],
    hitRate: 100,
    selectByClick: true,
    preventClickEventOnDrag: true,  //  Prevent click event on drag. (mousemove, touchmove)
    selectFromInside: false,
    toggleContinueSelect: ["shift"],
    ratio: 0
});

SelectoRef.on("dragStart", function (event) {
    console.log("isDouble", event.isDouble);

    var target = event.inputEvent.target;

    if (
        me.objMoveable.isMoveableElement(target)
        || me.targets.some(t => t === target
        || t.contains(target))
        || target.tagName === "BUTTON"
        //|| target.isContentEditable
    ) {
        event.stop();
    }
}).on("select", function (event) {
    console.log("isDouble", event.isDouble);

    me.targets = event.selected;
    me.objMoveable.target = me.targets;
}).on("selectEnd", function (event) {
    console.log("isDouble", event.isDouble);

    if (event.isDragStart) {
        event.inputEvent.preventDefault();

        setTimeout(() => {
            me.objMoveable.dragStart(event.inputEvent);
        });
    }
});

[jadiagaurang]

Hi @daybrush

Can you help me with my previous question?

For contentEditable Texts, I would like to allow the Users to Drag an element on the first click. If user click again on the selected element then allow them to edit the text.

I have provided my Moveable and Selecto config in the previous comment!

Can you help with the implementation on this idea?