Как сделать текстовое поле перетаскиваемым с помощью jQuery?

Есть ли у кого-нибудь опыт перетаскивания текстового поля ввода html с помощью jQuery?

Я попытался обернуть текстовое поле внутри div и сделать его изменяемым, но не перетаскиваемым. Блок div и текстовое поле размещаются в стандартном диалоговом окне пользовательского интерфейса jQuery. На самом деле, мне нужно как перетаскиваемое, так и изменяемое по размеру текстовое поле ввода html внутри диалога.

Код выглядит следующим образом:

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

Заранее спасибо.

Горан


dialog jquery draggable resizable textbox
person tesicg    schedule 23.05.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Аналогичный пример:

 <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>
person Simon Dorociak    schedule 23.05.2012
comment
Не могли бы вы, пожалуйста, объяснить подробнее? - person tesicg; 23.05.2012
comment
Спасибо за ссылку, но я знаю, как перетаскивать и изменять размер div. Проблема заключается в том, как сделать текстовое поле перетаскиваемым и изменяющим его размер. - person tesicg; 23.05.2012

arrow_upward
0
arrow_downward

По умолчанию перетаскивание отключено для элементов типа input,textarea,button,select,option. Вы можете изменить/очистить это с помощью параметра cancel.

Рабочий код:

$("#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>

person H77    schedule 24.11.2017