big bug:input text can not input inside the div to drag

wuyanbing commented 5 years ago

there is a big bug,when I new PlainDraggable("myDiv"),I just can not input anthing to my UI

anseki commented 5 years ago

Hi @wuyanbing, thank you for the comment. This example works fine, i.e. you can input text: https://anseki.github.io/plain-modal/#child-and-descendants

So, could you show your example code? e.g. Using http://jsfiddle.net/

wuyanbing commented 5 years ago

thanks for reply.But I play with the plain-draggable and we are here too.I build a very simple demo html to run your plain-draggable.It Can Drag,but can not input my form anything.please have a check.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{message}}</h1>
        <h1>vue element dialog to drag</h1>
        <el-button @click="openDialog">Click me to open dialog</el-button>
        <el-dialog title="address" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="Name" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="Region" :label-width="formLabelWidth">
                    <el-select v-model="form.region">
                        <el-option label="Region one" value="1"></el-option>
                        <el-option label="Region Two" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">Cancel</el-button>
                <el-button type="primary" @@click="dialogFormVisible = false">Confirm</el-button>
            </div>
        </el-dialog>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="plain-draggable.min.js"></script>

<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            message: 'hello,vue',
            dialogVisible: false,
            dialogFormVisible: false,
            formLabelWidth: '90',
            form: {
                name: '',
                region: ''
            }
        },
        methods: {
            openDialog: function () {
                this.dialogFormVisible = true;
                this.$nextTick(function () {
                    new PlainDraggable(document.querySelector(".el-dialog"));
                })
            }
        }
    })
</script>
</html>

anseki commented 5 years ago

I see. That is correct behavior, and of course it is not bug. It seems that you mistook usage of the library, and you did not read the document well. See: https://anseki.github.io/plain-draggable/#options-handle All of your dialog box accepts dragging-event because you did not specify the "handle". Therefore the text-box (<input>) also accepts mouse and touch events as dragging-event instead of focusing-operation.

As a test, try to drag the text-box (<input>). You will see that the dialog box is dragged.

Then, you can specify the handle option, or you can specify CSS user-select property for those events. For example: https://jsfiddle.net/kfh8n9wt/ Try to drag the blue title bar.

wuyanbing commented 5 years ago

yeah,it worked.thank you very much!

anseki commented 5 years ago

I'm glad if I could help you. :smile: Could you close this issue if it was solved?

anseki / plain-draggable

big bug:input text can not input inside the div to drag #15