SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Movable Text Box

    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 ! Would this be straight CSS3? or would be better with JQuery?

    Thanks for any help.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    If this is what the OP wants to do, I was just going to suggest using jQueryUI, but I found this snippet that implements the same functionality without requiring an additional library.

    Here's some sample code:

    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •