如何添加或修改我的 jquery 多选到这个 javascript？

Question

问题

我希望能够触摸我的屏幕并将我的手指拖过表面和 select 多个框。我想用我的鼠标做同样的事情，我按住鼠标并将它拖到我想要的任何地方 select。正因为如此，我想我想在 JQuery/JQuery 移动设备中实现它，这样我就可以开箱即用？

代码

Here 是我目前所做工作的工作示例。

构建了一个 table 并且能够 select 按颜色显示特定元素（并忽略另一个）
能够按行或列 select。也能unselect。
能够select整个table或unselect（按颜色）。

尝试次数

我尝试使用 JQuery UI。具体来说，JQuery selectable api，但它破坏了我现有的代码并且存在错误。我也看了一下我在这里找到的东西，但它完全依赖于使用 shift 和 control 的桌面方法。我还尝试将 select 作为属性添加到我的 <td> 元素并使用多个 select。我不认为 hack 会起作用，但我至少想尝试一下。最后，查看了 Whosebug，似乎每个人都想对复选框或键盘执行此操作。

同样，我需要的是一种能够 select 多个 boxes/grids 也就是我的网格中的元素的方法，方法是触摸屏幕并将其拖动到我想要的任何位置 select或者用我的鼠标做同样的事情。

编辑这个不错question，很像，但不是我需要的。相同的用例，但适用于鼠标事件和触摸事件。

任何建议、线索、提示或更多都将不胜感激，因为我已经为此投入了一切和厨房水槽。我觉得 this。

Answer 1

我结合了 this answer with this one，它似乎在桌面和移动设备上都可以工作（代码有点难看，对此感到抱歉）。

工作原理

table 上的每个 <td> 都会侦听普通鼠标事件 (up/down/move) 和触摸事件 (start/end/move)。

在 mousedown/touchstart 上，运动变为 "active"，selection 被重置（删除 .highlight class）和当前事件元素是 selected.

诀窍在于 touchmove 事件：由于 $(this) 始终指的是触摸事件开始的元素，我们必须查看用户实际触摸的是什么，将事件坐标传递给 highlightHoveredObject，这将 select 正确的元素。

JSFiddle

JavaScript

function highlightHoveredObject(x, y) {
    $('td').each(function() {
      // check if is inside boundaries
      if (!(
          x <= $(this).offset().left || x >= $(this).offset().left + $(this).outerWidth() ||
          y <= $(this).offset().top  || y >= $(this).offset().top + $(this).outerHeight()
      )) {

        $(this).addClass('highlight');
      }
    });
}

// if you are using jQuery Mobile replace the next line with
// $("#yourpage").on("pagecreate", function() {

$(document).ready(function() {  

    var active = false;

    $("td").on("mousedown", function(ev) {
        active = true;
        $(".highlight").removeClass("highlight"); // clear previous selection
        ev.preventDefault(); // this prevents text selection from happening
        $(this).addClass("highlight");
    });

    $("td").on("mousemove", function(ev) {
        if (active) {
            $(this).addClass("highlight");
        }
    });

    $(document).on("mouseup", function(ev) {
        active = false;
    });

    $("td").on("touchstart", function(ev) {
        active = true;
        $(".highlight").removeClass("highlight"); // clear previous selection
        ev.preventDefault(); // this prevents text selection from happening
        $(this).addClass("highlight");
    });

    $("td").on("touchmove", function(ev) {
        if (active) {
            var touch = ev.originalEvent.touches[0];
            highlightHoveredObject(touch.clientX, touch.clientY);
        }
    });

    $(document).on("touchend", function(ev) {
        active = false;
    });

});

HTML

<table border="1" width="100%">
    <tbody><tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</tbody></table>

CSS

.highlight { background-color:#ccffcc; }

如何添加或修改我的 jquery 多选到这个 javascript？

How to add or modify my jquery for multiple selection to this javascript?

javascript

jquery

jquery-ui

jquery-mobile

问题

代码

尝试次数