Я создаю график, отображающий события, происходящие со временем. Каждое из моих событий представляет собой горизонтальную полосу, которая создается с помощью <div>
как показано ниже:
<div class="aaaa" style="margin-left: 0.00%; width:100.00%;">aaaa</div>
<div class="aaaa" style="margin-left: 5.00%; width: 20.00%;">bbbb</div>
<div class="aaaa" style="margin-left:25.00%; width: 50.00%;">cccc</div>
<div class="aaaa" style="margin-left:55.00%; width: 45.00%;">dddd</div>
В верхней части этого графика у меня есть "линейка", которая является перетаскиваемой и изменяемой по размеру <div>
<div id="draggable2" class="draggable ui-widget-content">
<p>Ruler</p>
</div>
Я намерен перетащить эту линейку горизонтально и использовать ее для выбора всех баров моих графиков, находящихся под линейкой. Когда выбраны полосы, цвет фона должен измениться.
Пока мне удается перетащить и изменить размер моего линейки, как я хочу, со следующим кодом:
$(function () {
$("#draggable2").draggable({
axis: "x"
});
});
$(function () {
$("#draggable2").resizable({
helper: "ui-resizable-helper",
handles: "se, sw, e, w"
});
});
Я также могу выбрать нужные бары, используя следующий код:
$(".fake").selectable({
filter: "div"
});
Вы можете видеть на упомянутой ниже скрипке, что когда вы делаете "выбор лассо", мои бары становятся розовыми.
Тем не менее, я хотел бы совместить мой линейку с этим "выбором лассо", или, другими словами, мне бы хотелось, чтобы после того, как мой линейка перетащили, все <div>
, которые ниже, были выбраны.
Я создал скрипку, чтобы проиллюстрировать мою проблему: http://jsfiddle.net/Lge93/
Поскольку я новичок в Javascript и JQuery, я был бы очень признателен за любое решение или предложение.
Спасибо за ваше время
Редактировать ответы на вопросы: Мое окончательное решение на основе кода, предоставленного Jtromans, доступно здесь: http://jsfiddle.net/Lge93/5/
Если я правильно понимаю ваш вопрос, похоже, вы могли бы решить проблему следующим образом.
При взаимодействии с линейкой вы сможете вычислить новую ширину, x- и y-координаты. Это довольно прямолинейно и требует лишь нескольких строк кода jQuery в обратном вызове после любой формы взаимодействия с вашим линейкой.
Затем вы можете проверить каждый элемент в диаграмме (gant?), Чтобы увидеть, занимает ли он какую-либо из той же области, что и линейка. Это будет относиться к родительскому контейнеру.
Дьявол в деталях за то, как вы хотели бы обработать, является ли линейка "в" элементом диаграммы Ганта. Ниже приведен какой-то код, чтобы начать работу над тем, является ли линейка той же позиции, что и другие div:
function checkOverlays (x, width, y, height) {
$(".aaaa").each (function (i,e) {
var thisWidth = $(this).width();
var thisHeight = $(this).height();
var offsetTop = $(this).offset().top - $(this).parent().offset().top;
var offsetLeft = $(this).offset().left - $(this).parent().offset().left;
console.log('x coverage: ' + offsetLeft + " to " + parseFloat(thisWidth + offsetLeft));
console.log('y coverage: ' + offsetTop + " to " + parseFloat(thisHeight + offsetTop));
if (offsetLeft > x && offsetLeft < parseFloat(x + width) ) {
console.log("I'm in the same x space");
$(this).css('background-color', 'red');
}
if (offsetTop > y && offsetTop < parseFloat(y + height) ) {
console.log("I'm in the same y space");
$(this).css('background-color', 'red');
}
})
}
$("#draggable2").on("resize drag", function () {
var thisWidth = $(this).width();
var thisHeight = $(this).height();
var offsetTop = $(this).offset().top - $(this).parent().offset().top;
var offsetLeft = $(this).offset().left - $(this).parent().offset().left;
console.log('x coverage: ' + offsetLeft + " to " + parseFloat(thisWidth + offsetLeft));
console.log('y coverage: ' + offsetTop + " to " + parseFloat(thisHeight + offsetTop));
checkOverlays (offsetLeft, thisWidth, offsetTop, thisHeight)
});
Здесь мое решение:
$(function() {
$( "#draggable2" ).draggable({
axis: "x",
drag: function(e) {
var selectableElements = $(".fake").data().uiSelectable.selectees;
var ruler = $(e.target);
$.each(selectableElements, function(i, v) {
if(ruler.offset().left >= $(v).offset().left) {
$(v).addClass("ui-selected");
}else {
$(v).hasClass("ui-selected") && $(v).removeClass("ui-selected");
}
});
}
});
});
$(function() {
$( "#draggable2" ).resizable({
helper: "ui-resizable-helper",
handles: "se, sw, e, w"
});
});
$(".fake").selectable({filter:"div"});