0

In this plunk I have an input field type text with jQuery resizable/draggable applied. There are two problems. First, draggable doesn't work. Second, resizable only works with a "South East" handle, even though I specified "all". Hox to fix this?

HMTL

<input type="text" class="field" />

Javascript

$( document ).ready(function() {

  $(".field").draggable({  });

  $(".field").resizable({ 
    handles: "all"
  });

});
ps0604
  • 1,227
  • 23
  • 133
  • 330
  • 1
    [this question](https://stackoverflow.com/questions/8572190/how-to-make-text-input-box-resizable-like-textarea-by-dragging-its-right-botto) shows how to make it resizeable without a plugin. I think you may need to wrap it in a div or span, and make that draggable. – Barmar Jun 21 '18 at 17:18
  • Possible duplicate of: https://stackoverflow.com/questions/29360519/dragging-input-text-in-jquery-ui-draggable – Twisty Jun 21 '18 at 18:53

1 Answers1

3

It not good to assign Draggable to a Text Field. The browser is anticipating a click event to enter the cursor, so it does not give up control easily.

I would advise the following:

$(function() {
  $(".field-wrapper").draggable({
      handle: ".handle"
    })
    .resizable({
      handles: "all",
      resize: function(e, ui) {
        var s = ui.size;
        $(".field", this).width(s.width - 40).height(s.height);
        $(".handle", this).height(Math.round(s.height / 2) + 20).css("margin-top", (Math.round(s.height / 2) - 20) + "px");
      }
    });
});
.field-wrapper {
  width: 245px;
  border: 1px inset #ccc;
  border-radius: 6px;
  padding: 0;
}

.field-wrapper .handle {
  display: inline-block;
  cursor: move;
}

.field-wrapper .field {
  border: 0;
  padding: 0;
  padding-left: .5em;
  margin: -1px 0;
  border-left: 1px solid #ccc;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="field-wrapper">
  <span class="handle ui-icon ui-icon-grip-dotted-vertical"></span>
  <input type="text" class="field" />
</div>
Twisty
  • 30,304
  • 2
  • 26
  • 45