[英]How to select multiple elements in iron-selector by mouse drag
How can I select multiple items inside an iron-selector
by clicking, holding and dragging the mouse, or even by drawing a rectangle with the mouse, and selecting all the items under it? 如何通过单击,按住和拖动鼠标,甚至用鼠标绘制一个矩形,然后选择其下的所有项目,在
iron-selector
选择多个项目?
I use Polymer 1.11.3 and iron-selector 2.1.0, and reading the documentation provided no obvious solution. 我使用聚合物1.11.3和铁选择器2.1.0,并且阅读文档没有提供明显的解决方案。
This is my actual element in which I want to enable the drag-selection: 这是我要启用拖动选择的实际元素:
My goal is to be able to click eg on Sunday 7, drag the mouse to 15, release the click, and have 7-15 selected. 我的目标是能够单击,例如在星期日7,将鼠标拖动到15,释放单击,并选择7-15。
You can select multiple items in iron-selector
with multi
attribute: 您可以在具有
multi
属性的iron-selector
选择多个项目:
<iron-selector attr-for-selected="name" selected-items = "{{selected}}" multi>
<div name="foo">Foo</div>
<div name="bar">Bar</div>
<div name="zot">Zot</div>
</iron-selector>
Selected items will be an array at selected
property. 选定项将是
selected
属性处的数组。
To be able to select my mouse click and drag, do the following: 为了能够选择鼠标单击并拖动,请执行以下操作:
Set the css property user-select: none;
设置css属性
user-select: none;
to the element which holds your selectable items. 到包含您的可选项目的元素。
Add on-track="handleTrack"
to the element which holds your selectable items. 将
on-track="handleTrack"
到保存可选项目的元素。
Put this div somewhere in your element: <div id="selectionBox" style="position:absolute; top:0; left:0; height:0; width:0; border:2px solid #000; background-color:rgba(128, 128, 128, 0.3); z-index:999;"></div>
将此div放在元素中的某个位置:
<div id="selectionBox" style="position:absolute; top:0; left:0; height:0; width:0; border:2px solid #000; background-color:rgba(128, 128, 128, 0.3); z-index:999;"></div>
Then, add these functions to your element: 然后,将以下功能添加到您的元素中:
handleTrack: function(e) {
switch(e.detail.state) {
case "start":
this.x1 = e.detail.x;
this.y1 = e.detail.y;
this.drawRectangle(this.x1, this.y1, this.x2, this.y2);
break;
case "track":
this.x2 = e.detail.x;
this.y2 = e.detail.y;
this.drawRectangle(this.x1, this.y1, this.x2, this.y2);
break;
case "end":
this.x2 = e.detail.x;
this.y2 = e.detail.y;
this.drawRectangle(0, 0, 0, 0);
this.selectRectangle(e);
break;
}
},
drawRectangle: function(x1, y1, x2, y2) {
this.$.selectionBox.style.left = x1 + 'px';
this.$.selectionBox.style.top = y1 + 'px';
this.$.selectionBox.style.width = (x2 - x1) + 'px';
this.$.selectionBox.style.height = (y2 - y1) + 'px';
},
selectRectangle: function(e) {
var tol = 20;
var ironSelectors = Polymer.dom(e.currentTarget).querySelectorAll("iron-selector");
ironSelectors.forEach(function(selector) {
selector.items.forEach(function(i) {
var el = i.getBoundingClientRect();
if ((el.left+tol >= this.x1) && (el.top+tol >= this.y1) && (el.right-tol <= this.x2) && (el.bottom-tol <= this.y2)) {
selector.select(i.value);
}
}.bind(this));
}.bind(this));
}
This code also works if you have multiple iron-selector
. 如果您有多个
iron-selector
则此代码也适用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.