0

我正在构建一个图表，显示随时间发生的事件。我的每个事件都是使用<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/

4

2 回答 2

1

这是我的解决方案：

$(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"});

http://jsfiddle.net/Lge93/3/

于 2013-11-13T11:00:54.553 回答
0

如果我正确理解您的问题，听起来您可以通过以下方式解决问题。

与标尺交互后，您将能够计算新的宽度、x 和 y 坐标。这非常简单，在与您的标尺进行任何形式的交互后，只需在回调中添加几行 jQuery 代码即可。

然后，您可以检查（甘特？）图表中的每个项目，看看它是否占据了与标尺相同的区域。这将相对于父容器。

问题在于您希望如何处理标尺是否“在”甘特图 div 项中。下面是一些代码，可让您开始计算 Ruler 是否与其他 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)
});
于 2013-11-13T10:36:32.827 回答