Movable Text Box

JavaScript
1

I know pretty much zip about CSS/JS and I suspect this is really easy, but I just wonder what the best most flexible ways to do it.

How would you create a text box (i’e a box that users can type text into, and that text is held in a variable) which can easily be manipulated on the screen by it’s x and y? I come from a games coding background so I used to manipulating things by their .x and .y ! :slight_smile: Would this be straight CSS3? or would be better with JQuery?

Thanks for any help.

2

Hi there,

Do I understand you correctly that you are trying to make a text input draggable (i.e. that you can drag it around the screen at will)?

3

The following compatibility information will be useful, in regard to clientLeft/clientTop and offsetLeft/offsetTop
http://www.quirksmode.org/dom/w3c_cssom.html

Normally people tend to use a library of some kind, which helps to reduce compatibility complexities to something more manageable, such as with jQuery’s .position() interface.

4

If this is what the OP wants to do, I was just going to suggest using jQueryUI, but I found [URL=“http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/”]this snippet that implements the same functionality without requiring an additional library.

Here’s some sample code:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery scaffold</title>
  </head>
  
  <body>
    <input type="text" class="draggable" />
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
      (function($) {
          $.fn.drags = function(opt) {
      
              opt = $.extend({handle:"",cursor:"move"}, opt);
      
              if(opt.handle === "") {
                  var $el = this;
              } else {
                  var $el = this.find(opt.handle);
              }
      
              return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
                  if(opt.handle === "") {
                      var $drag = $(this).addClass('draggable');
                  } else {
                      var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
                  }
                  var z_idx = $drag.css('z-index'),
                      drg_h = $drag.outerHeight(),
                      drg_w = $drag.outerWidth(),
                      pos_y = $drag.offset().top + drg_h - e.pageY,
                      pos_x = $drag.offset().left + drg_w - e.pageX;
                  $drag.css('z-index', 1000).parents().on("mousemove", function(e) {
                      $('.draggable').offset({
                          top:e.pageY + pos_y - drg_h,
                          left:e.pageX + pos_x - drg_w
                      }).on("mouseup", function() {
                          $(this).removeClass('draggable').css('z-index', z_idx);
                      });
                  });
                  e.preventDefault(); // disable selection
              }).on("mouseup", function() {
                  if(opt.handle === "") {
                      $(this).removeClass('draggable');
                  } else {
                      $(this).removeClass('active-handle').parent().removeClass('draggable');
                  }
              });
      
          }
      })(jQuery);
      
      $(".draggable").drags();
    </script>
  </body>
</html>

In this example, you can drag the text input around the screen, but you have to tab into the input for it to receive focus.
Therefore it might be better to give the input a handle (which is draggable) and not apply the drag/drop functionality to the input itself.