如何使用jQuery使文本框可拖动？

Question

Is anybody there who has experience with making html input text box draggable using jQuery?

I've tried to wrap text box inside div and can make it resizable, but not draggable. The div and text box are placed on standard jQuery UI dialog. Actually, I need both - draggable and resizable html input text box inside dialog.

The code is as follows:

<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $("#btnShow").click(function(e) {
            $('#dialog').dialog("open");
        });
        $('#dialog').dialog({
            title: "Sample dialog",
            resizable: false,
            autoOpen: false,
            width: 400,
            height: 300,
            buttons: [{ text: "OK", click: function() { /* do something */ } },
                { text: "Cancel", click: function() { $(this).dialog("close") } }]
        });
        $('#divText1').draggable({
            containment: "parent",
            cursor: "move"
        }).resizable({
            containment: "parent",
            handles: "e, w"
        });
    });
</script>

    <input id="btnShow" type="button" value="Show" />

    <div id="dialog" title="Dialog Box" style="border: solid 1px black; margin: 0px 0px 0px 0px; padding: 5px 0px 0px 5x;">
        <div id="divText1" style="width: 200px; height: 30px;">
            <input type="text" style="width: 98%;" value="Hello world!" /><br /><br />
        </div>
    </div>

Thank you in advance.

Goran

Answer 1

Similar example:

 <script type="text/javascript">
            $(function () {
                $(".draggable").draggable({
                    revert: true,
                    helper: 'clone',
                    start: function (event, ui) {
                        $(this).fadeTo('fast', 0.5);
                    },
                    stop: function (event, ui) {
                        $(this).fadeTo(0, 1);
                    }
                });

                $("#droppable").droppable({
                    hoverClass: 'active',
                    drop: function (event, ui) {
                        this.value = $(ui.draggable).text();
                    }
                });
            });
        </script>

Answer 2

By default dragging is disabled on elements of type input,textarea,button,select,option . You can change/clear this using the cancel option.

Working code:

 $("#btnShow").click(function(e) { $('#dialog').dialog("open"); }); $('#dialog').dialog({ title: "Sample dialog", resizable: false, autoOpen: false, width: 400, height: 300, buttons: [{ text: "OK", click: function() { /* do something */ } }, { text: "Cancel", click: function() { $(this).dialog("close") } } ] }); $('#divText1').draggable({ cancel: null, containment: "parent", cursor: "move" }).resizable({ containment: "parent", handles: "e, w" }); 

 <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <input id="btnShow" type="button" value="Show" /> <div id="dialog" title="Dialog Box" style="border: solid 1px black; margin: 0px 0px 0px 0px; padding: 5px 0px 0px 5x;"> <div id="divText1" style="width: 200px; height: 30px;"> <input type="text" style="width: 98%;" value="Hello world!" /><br /><br /> </div> </div>