如何使用箭頭鍵移動選定的元素
[英]How to move selected elements using arrow keys
原文
2016-01-09 22:27:59
4
1
jquery/
jquery-ui/
jquery-ui-draggable/
jquery-draggable/
jquery-ui-selectable
問題描述
jQuery ui draggable不允許使用鍵盤上的箭頭鍵移動元素。 只能使用鼠標。
為此鍵盤事件處理程序是使用以下命令創建的
$(".designer-panel-body").keydown(function(e) {
switch(e.which) {
case 37: // left
$(".ui-selected").each(function() {
var $this = $(this);
$this.css({
left: $this.left -2
});
});
break;
case 38: // up
$(".ui-selected").each(function() {
var $this = $(this);
$this.css({
top: $this.top -2
});
});
break;
case 39: // right
$(".ui-selected").each(function() {
var $this = $(this);
$this.css({
left: $this.left +2
});
});
break;
case 40: // down
$(".ui-selected").each(function() {
var $this = $(this);
$this.css({
top: $this.top +2
});
});
break;
default: return; // exit this handler for other keys
}
e.preventDefault(); // prevent the default action (scroll / move caret)
});
但是不會發生keydown事件。 要重新使用，請運行下面的代碼，選擇元素，然后嘗試使用箭頭拖動。 方向鍵將被忽略。 如何解決此問題，以便可以使用數組鍵逐像素拖動？
小提琴： https : //jsfiddle.net/bgx8gpwc/2/
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <style> .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; } </style> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script> 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({}); $(".designer-panel-body").keydown(function(e) { switch(e.which) { case 37: // left $(".ui-selected").each(function() { var $this = $(this); $this.css({ left: $this.left -2 }); }); break; case 38: // up $(".ui-selected").each(function() { var $this = $(this); $this.css({ top: $this.top -2 }); }); break; case 39: // right $(".ui-selected").each(function() { var $this = $(this); $this.css({ left: $this.left +2 }); }); break; case 40: // down $(".ui-selected").each(function() { var $this = $(this); $this.css({ top: $this.top +2 }); }); break; default: return; // exit this handler for other keys } e.preventDefault(); // prevent the default action (scroll / move caret) }); }); </script> </head> <body> <div class='panel designer-panel'> <div class='panel-body designer-panel-body panel-warning' style='height:9.37cm'> <div class='designer-field' contenteditable='true' style='top:2.30cm;left:5.84cm;width:10.24cm;height:0.63cm;font-family:Arial;font-size:14pt;font-weight:bold;'>vnimi+' '+dok.tasudok</div> <div class='designer-field' contenteditable='true' style='top:2.30cm;left:16.37cm;width:2.68cm;height:0.61cm;font-size:14pt;'>DOK.kuupaev</div> <div class='rectangle' style='border-width: 1px;background-color:#FFFFFF;top:2.99cm;left:1.34cm;width:18.05cm;height:5.29cm'></div> <div class='designer-field' contenteditable='true' style='top:3.01cm;left:1.53cm;width:9.71cm;height:0.55cm;font-size:12pt;'>m.FIRMA</div> <div class='designer-field' contenteditable='true' style='top:3.01cm;left:12.13cm;width:3.13cm;height:0.53cm;font-size:12pt;'>ise.telefon</div> <div class='designer-field' contenteditable='true' style='top:3.01cm;left:17.11cm;width:1.89cm;height:0.55cm;font-size:12pt;text-align:right;'>ise.regnr</div> <div class='designer-label' contenteditable='true' style='top:3.04cm;left:11.39cm;text-align:right;font-size:12pt;'>Tel.</div> <div class='designer-label' contenteditable='true' style='top:3.04cm;left:15.71cm;font-size:12pt;'>Reg.Nr</div> <div class='designer-field' contenteditable='true' style='top:3.62cm;left:1.55cm;width:9.45cm;height:0.55cm;font-size:12pt;'>ise.tanav</div> <div class='designer-field' contenteditable='true' style='top:3.70cm;left:15.16cm;width:3.37cm;height:0.55cm;font-size:12pt;'>ise.vatpayno</div> <div class='designer-label' contenteditable='true' style='top:3.72cm;left:12.89cm;text-align:right;font-size:12pt;'>KMKR nr</div> <div class='designer-field' contenteditable='true' style='top:4.30cm;left:1.58cm;width:9.08cm;height:0.55cm;font-size:12pt;'>rtri(ise.postiindek)+' '+rtri(ise.piirkond)</div> <div class='designer-field' contenteditable='true' style='top:4.30cm;left:14.66cm;width:4.34cm;height:0.55cm;font-size:12pt;text-align:right;'>aarve(dok.arvekonto, 'konto.arveldusar')</div> <div class='designer-label' contenteditable='true' style='top:4.33cm;left:13.89cm;font-size:12pt;'>A/A</div> <div class='designer-horizontalline' style='border-width: 1px;top:4.96cm;left:1.34cm;width:18.03cm;height:0.00cm'></div> <div class='designer-field' contenteditable='true' style='top:5.04cm;left:17.13cm;width:1.89cm;height:0.55cm;font-size:12pt;text-align:right;'>klient.regnr</div> <div class='designer-field' contenteditable='true' style='top:5.06cm;left:4.18cm;width:12.71cm;height:0.55cm;font-size:12pt;'>klient.nimi</div> <div class='designer-label' contenteditable='true' style='top:5.06cm;left:15.74cm;font-size:12pt;'>Reg.Nr</div> <div class='designer-label' contenteditable='true' style='top:5.09cm;left:1.63cm;font-size:12pt;'>Maksja</div> <div class='designer-field' contenteditable='true' style='top:5.72cm;left:1.53cm;width:11.68cm;height:0.55cm;font-size:12pt;'>klient.tanav</div> <div class='designer-field' contenteditable='true' style='top:5.72cm;left:15.18cm;width:3.37cm;height:0.55cm;font-size:12pt;'>klient.vatpayno</div> <div class='designer-label' contenteditable='true' style='top:5.75cm;left:12.92cm;text-align:right;font-size:12pt;'>KMKR nr</div> <div class='designer-field' contenteditable='true' style='top:6.38cm;left:1.53cm;width:11.84cm;height:0.55cm;font-size:12pt;'>rtri(klient.postiindek)+' ' +rtri(klient.piirkond)</div> <div class='designer-field' contenteditable='true' style='top:6.38cm;left:13.47cm;width:3.37cm;height:0.55cm;font-size:12pt;'>sql("sele transfld('nimetus', 'riik', rapopref()) from riik where kood=klient.riik2", '' )</div> <div class='designer-field' contenteditable='true' style='top:6.99cm;left:3.71cm;width:12.16cm;height:1.16cm;font-size:12pt;'>klient.aadress</div> <div class='designer-label' contenteditable='true' style='top:7.01cm;left:1.45cm;text-align:right;font-size:12pt;'>Postiaadress</div> <div class='designer-field' contenteditable='true' style='top:8.33cm;left:3.95cm;width:2.11cm;height:0.55cm;font-size:12pt;'>dok.tasukuup</div> <div class='designer-field' contenteditable='true' style='top:8.33cm;left:6.08cm;width:8.05cm;height:0.55cm;font-size:12pt;'>eval( 'maksetin.' +left(rapopref()+'tingimus',10))</div> <div class='designer-label' contenteditable='true' style='top:8.35cm;left:1.45cm;font-size:12pt;'>Maksetähtaeg</div> <div class='designer-field' contenteditable='true' style='top:8.91cm;left:1.45cm;width:13.66cm;height:0.45cm;'>iif(!empty(dok.saaja), IR("Saaja: ")+sql('sele rtri(nimi)+" "+rtri(tanav)+" "+rtri(piirkond)+" "+rtri(postiindek) from klient where kood=dok.saaja',''),'')</div> </div> <div class='bg-warning'> <div class='panel-footer'><i class='glyphicon glyphicon-chevron-up'></i> GroupHeader 1: str(dokumnr)+str(koopia,2)</div> </div> </div> </body> </html>
1 個解決方案
解決方案1
1 已采納 2016-01-10 05:12:07
這是一個如何在不使用jQuery UI draggable的情況下使用箭頭鍵“拖動” DOM元素的示例。
在這個例子中的jQuery .before()和.after()函數是用來放置元件到一個新的位置。
$('.el').click(function(){ $('.el').removeClass('active'); $(this).addClass('active'); }); $('body').on('keyup',function(e){ switch(e.which) { case 37: // left var tmp_id = $('.el.active').prev().attr('id'); $('#' + tmp_id).animate({ opacity: 0 }, 100, function(){ $('.el.active').after($('.el.active').prev()); }); $('#' + tmp_id).animate({ opacity: 1 }, 300); break; case 38: // up var active_index = $('.el.active').index(); var index_min = $('.el.active').parent().children().first().index(); var index_max = $('.el.active').parent().children().last().index(); var next_element = $('.el.active').parent().prev().children(':eq('+active_index+')'); if(index_min === active_index){ var prev_el = next_element.next(); $('.el.active').before(next_element); $(prev_el).before($('.el.active')); } if(index_max === active_index || (active_index > index_min && active_index < index_max )){ var prev_el = next_element.prev(); $('.el.active').before(next_element); $(prev_el).after($('.el.active')); } break; case 39: // right var tmp_id = $('.el.active').next().attr('id'); $('#' + tmp_id).animate({ opacity: 0 }, 100, function(){ $('.el.active').before($('.el.active').next()); }); $('#' + tmp_id).animate({ opacity: 1 }, 300); break; case 40: // down var active_index = $('.el.active').index(); var index_min = $('.el.active').parent().children().first().index(); var index_max = $('.el.active').parent().children().last().index(); var next_element = $('.el.active').parent().next().children(':eq('+active_index+')'); var prev_el = next_element.prev(); if(index_min === active_index){ var prev_el = next_element.next(); $('.el.active').before(next_element); $(prev_el).before($('.el.active')); } if(index_max === active_index || (active_index > index_min && active_index < index_max )){ var prev_el = next_element.prev(); $('.el.active').before(next_element); $(prev_el).after($('.el.active')); } break; default: return; // exit this handler for other keys } e.preventDefault(); });
.container{ width: 100%; } div[id^="el-wr"]{ width: 280px; margin: 0 auto; } .el{ width: 60px; height: 60px; background-color: #aaa; margin: 5px; float: left; cursor: pointer; text-align: center; line-height: 60px; font-size: 28px; color: white; } .active{ background-color: #525252; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="container"> <div id="el-wr0"> <div class="el" id="index1">1</div> <div class="el" id="index2">2</div> <div class="el" id="index3">3</div> <div class="el" id="index4">4</div> </div> <div id="el-wr1"> <div class="el" id="index5">5</div> <div class="el" id="index6">6</div> <div class="el" id="index7">7</div> <div class="el" id="index8">8</div> </div> <div id="el-wr2"> <div class="el" id="index9">9</div> <div class="el" id="index10">10</div> <div class="el" id="index11">11</div> <div class="el" id="index12">12</div> </div> </div>
如何使用javascript中的向上和向下箭頭鍵在列表中移動所選項目？
[英]how to move selected item in a list using up and down arrow keys in javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.