How to use arrow keys to move selected elements

Question

Arrow keys should move selected elements pixel by pixel in addition to moving by mouse.

I tried code below but keydown event does not occur. To reproduce, select elements usong laoos and press in arrow keys. Nothing happens. How to fix this so that arrows can used to move elements ?

Fiddle: https://jsfiddle.net/bgx8gpwc/7/





  
  
  
  
  

  




  
    

      vnimi+' '+dok.tasudok
      DOK.kuupaev
      
      m.FIRMA
      ise.telefon
      ise.regnr
      Tel.
      Reg.Nr
      ise.tanav
      ise.vatpayno
      KMKR nr
      rtri(ise.postiindek)+' '+rtri(ise.piirkond)
      aarve(dok.arvekonto, 'konto.arveldusar')
      A/A
      
      klient.regnr
      klient.nimi
      Reg.Nr
      Maksja
      klient.tanav
      klient.vatpayno
      KMKR nr
      rtri(klient.postiindek)+' ' +rtri(klient.piirkond)
      sql("sele transfld('nimetus', 'riik', rapopref()) from riik where kood=klient.riik2", '' )
      klient.aadress
      Postiaadress
      dok.tasukuup
      eval( 'maksetin.' +left(rapopref()+'tingimus',10))
      Maksetähtaeg
      iif(!empty(dok.saaja), IR("Saaja: ")+sql('sele rtri(nimi)+" "+rtri(tanav)+" "+rtri(piirkond)+" "+rtri(postiindek) from klient where kood=dok.saaja',''),'')
    
    
       GroupHeader 1: str(dokumnr)+str(koopia,2)

rrk · Accepted Answer

If you use $this.position() for getting position, your code will work just fine.

function getpos(e) {
  return {
    X: e.pageX,
    Y: e.pageY
  };
}

function Rect(start, stop) {
  this.left = Math.min(start.X, stop.X);
  this.top = Math.min(start.Y, stop.Y);
  this.width = Math.abs(stop.X - start.X);
  this.height = Math.abs(stop.Y - start.Y);
}

$(function() {
  var startpos;
  var selected = $([]),
    offset = {
      top: 0,
      left: 0
    };
  $(".designer-verticalline, .designer-rectangle, .designer-field, .designer-image").resizable();

  // http://stackoverflow.com/questions/705250/is-there-a-jquery-plugin-which-combines-draggable-and-selectable#8643716
  // teha: seal on ka mousedown mis andis viga, kaseda kasutada
  var $liigutatavad = $(".designer-verticalline, .designer-horizontalline, .designer-rectangle, .designer-field, .designer-image, .designer-label");
  $liigutatavad.draggable({
    start: function(event, ui) {
      var $this = $(this);

      if ($this.hasClass("ui-selected")) {
        // if this is selected, attach current offset
        // of each selected element to that element
        selected = $(".ui-selected").each(function() {
          var el = $(this);
          el.data("offset", el.offset());
        });
      } else {
        // if this is not selected, clear current selection
        selected = $([]);
        $liigutatavad.removeClass("ui-selected");
      }
      offset = $this.offset();
    },

    drag: function(event, ui) {
      // drag all selected elements simultaneously
      var dt = ui.position.top - offset.top,
        dl = ui.position.left - offset.left;
      selected.not(this).each(function() {
        var $this = $(this);
        var elOffset = $this.data("offset");
        $this.css({
          top: elOffset.top + dt,
          left: elOffset.left + dl
        });
      });

      // this does not fix the issue:
      //$(".designer-verticalline, .designer-rectangle, .designer-field, .designer-image").resizable();
    }
  });

  // ...but manually implement selection to prevent interference from draggable()
  $(".designer-panel-body").on("click", "div", function(e) {
    if ( /*!e.metaKey &&*/ !e.shiftKey && !e.ctrlKey) {
      // deselect other elements if meta/shift not held down
      $(".designer-panel-body").removeClass("ui-selected");
      $(this).addClass("ui-selected");
    } else {
      if ($(this).hasClass("ui-selected")) {
        $(this).removeClass("ui-selected");
      } else {
        $(this).addClass("ui-selected");
      }
    }

    //var selectable = $("#container").data("selectable");
    //selectable.refresh();
    //$( ".designer-panel-body" ).data("selectable")._mouseStop(null);
  });

  $(".designer-panel-body").selectable({
      selected : function() {
          $(".ui-selected").first().focus();
      }
  });


  $(".designer-panel-body").keydown(function(e) {
    switch (e.which) {
      case 37: // left
        $(".ui-selected").each(function() {
          var $this = $(this);
          var $position = $this.position();
          $this.css({
            left: $position.left - 2
          });
        });
        break;

      case 38: // up
        $(".ui-selected").each(function() {
          var $this = $(this);
          var $position = $this.position();
          $this.css({
            top: $position.top - 2
          });
        });
        break;

      case 39: // right
        $(".ui-selected").each(function() {
          var $this = $(this);
          var $position = $this.position();
          $this.css({
            left: $position.left + 2
          });
        });
        break;

      case 40: // down
        $(".ui-selected").each(function() {
          var $this = $(this);
          var $position = $this.position();
          $this.css({
            top: $position.top + 2
          });
        });
        break;

      default:
        return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
  });


});

.designer-panel-body {
  min-height: 1px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.panel-footer {
  background-color: inherit;
}
.designer-panel,
.designer-resetmargins {
  margin: 0;
  padding: 0;
}
.designer-verticalline,
.designer-horizontalline,
.designer-rectangle {
  font-size: 1pt;
  border: 1px solid #000000;
}
.designer-field {
  border: 1px solid lightgray;
  white-space: pre;
  overflow: hidden;
}
.ui-selecting {
  background-color: lightskyblue;
  color: white;
}
.ui-selected {
  background-color: lightskyblue;
  border-color: darkblue;
  color: white;
}
.designer-label {
  white-space: pre;
  /*overflow: hidden;*/
}
.designer-field,
.designer-label {
  font-family: "Times New Roman";
  font-size: 10pt;
  z-index: 2;
}
.designer-verticalline,
.designer-horizontalline,
.designer-rectangle,
.designer-field,
.designer-image,
.designer-label {
  position: absolute;
}




  

    vnimi+' '+dok.tasudok
    DOK.kuupaev
    
    m.FIRMA
    ise.telefon
    ise.regnr
    Tel.
    Reg.Nr
    ise.tanav
    ise.vatpayno
    KMKR nr
    rtri(ise.postiindek)+' '+rtri(ise.piirkond)
    aarve(dok.arvekonto, 'konto.arveldusar')
    A/A
    
    klient.regnr
    klient.nimi
    Reg.Nr
    Maksja
    klient.tanav
    klient.vatpayno
    KMKR nr
    rtri(klient.postiindek)+' ' +rtri(klient.piirkond)
    sql("sele transfld('nimetus', 'riik', rapopref()) from riik where kood=klient.riik2", '' )
    klient.aadress
    Postiaadress
    dok.tasukuup
    eval( 'maksetin.' +left(rapopref()+'tingimus',10))
    Maksetähtaeg
    iif(!empty(dok.saaja), IR("Saaja: ")+sql('sele rtri(nimi)+" "+rtri(tanav)+" "+rtri(piirkond)+" "+rtri(postiindek) from klient where kood=dok.saaja',''),'')
  
  
     GroupHeader 1: str(dokumnr)+str(koopia,2)

How to use arrow keys to move selected elements

Answers (1)

Related Questions