awesome-repositories.com
博客
awesome-repositories.com

通过 AI 驱动的搜索,发现最优秀的开源仓库。

探索精选搜索开源替代品自托管软件博客网站地图
项目关于排名机制媒体报道MCP 服务器
法律隐私政策服务条款
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·

10 个仓库

Awesome GitHub RepositoriesInteraction Tracking

Utilities for calculating spatial coordinates and element dimensions during user interactions.

Distinguishing note: Focuses on DOM-based coordinate calculation for drag-and-drop, distinct from general event tracking.

Explore 10 awesome GitHub repositories matching user interface & experience · Interaction Tracking. Refine with filters or upvote what's useful.

Awesome Interaction Tracking GitHub Repositories

用 AI 发现最棒的仓库。我们将通过 AI 为您搜索最匹配的仓库。
  • atlassian/react-beautiful-dndatlassian 的头像

    atlassian/react-beautiful-dnd

    34,049在 GitHub 上查看↗

    This project is a declarative drag-and-drop library designed for building accessible and fluid interface interactions within web applications. It provides a component-based interface for managing complex list reordering and spatial relationships between elements, utilizing a specialized state container to coordinate movement logic. The library distinguishes itself through a focus on accessibility, maintaining a live connection between visual drag states and the browser accessibility tree to support screen readers and keyboard navigation. It optimizes performance by bypassing standard componen

    Calculates element coordinates and dimensions during drag interactions to determine drop targets and reordering logic.

    JavaScriptdnddragdrag-and-drop
    在 GitHub 上查看↗34,049
  • clauderic/dnd-kitclauderic 的头像

    clauderic/dnd-kit

    17,243在 GitHub 上查看↗

    This project is a modular toolkit for building accessible, component-based drag-and-drop interfaces in React. It provides a foundational framework for managing complex spatial interactions, state synchronization, and element registration, allowing developers to create interactive web applications that support mouse, touch, and keyboard inputs. The library distinguishes itself through a highly extensible architecture that separates input handling from interaction logic. It utilizes a sensor-based input abstraction to normalize diverse user interactions and a plugin-driven lifecycle to inject c

    Maintains a centralized store of interactive components to enable efficient spatial lookups during drag operations.

    TypeScriptdragdrag-and-dropdraggable
    在 GitHub 上查看↗17,243
  • clauderic/react-sortable-hocclauderic 的头像

    clauderic/react-sortable-hoc

    10,905在 GitHub 上查看↗

    React Sortable Hoc is a library for building drag-and-drop reorderable lists and grids within web applications. It provides a set of reusable components designed to integrate into the component-based architecture of React, allowing users to rearrange elements through mouse or touch input. The library utilizes a higher-order component pattern to inject drag-and-drop state management into existing list components without requiring modifications to the underlying implementation. It employs portal-based ghost rendering to move elements outside the normal document flow, while using hardware-accele

    Calculates element coordinates and dimensions in real-time to determine drop targets and reordering logic during drag interactions.

    JavaScriptdrag-and-dropdraggingfront-end
    在 GitHub 上查看↗10,905
  • antonioru/beautiful-react-hooksantonioru 的头像

    antonioru/beautiful-react-hooks

    8,355在 GitHub 上查看↗

    This project is a collection of reusable React hooks designed to wrap browser APIs, manage state persistence, and handle DOM observation. It provides a consistent interface for integrating native browser capabilities directly into the React component lifecycle. The library includes specialized toolkits for monitoring the browser environment, such as window resizing, network connectivity, and viewport visibility. It also provides mechanisms for managing execution timing through debouncing, throttling, and the control of timeouts and intervals. Additional capabilities cover state management wi

    Provides hooks for capturing mouse and touch screen interactions to trigger immediate component updates.

    JavaScriptcustom-hooksfront-endhooks
    在 GitHub 上查看↗8,355
  • software-mansion/react-native-svgsoftware-mansion 的头像

    software-mansion/react-native-svg

    7,990在 GitHub 上查看↗

    This project is a graphics library for React Native that provides a cross-platform vector rendering engine. It maps SVG XML elements to native graphics APIs, allowing for the creation of scalable shapes and custom illustrations that maintain visual consistency across mobile and web environments. The library functions as a mapper that converts standard SVG markup into declarative component structures. It enables the creation of interactive vector interfaces by providing components that can detect and respond to user touch events. Its capability surface includes drawing basic geometric primiti

    Calculates spatial coordinates and boundaries to determine user interaction points within vector graphics.

    TypeScript
    在 GitHub 上查看↗7,990
  • nhn/tui.image-editornhn 的头像

    nhn/tui.image-editor

    7,652在 GitHub 上查看↗

    tui.image-editor is a JavaScript image manipulation library and web-based photo editor. It provides a browser-based interface for cropping, resizing, and applying filters to images using the HTML5 Canvas API. The project is distinguished by its role as a canvas-based annotation tool, allowing users to add text, shapes, and freehand drawings as graphic overlays. It offers extensive UI customization through theme configuration, interface text localization, and the ability to replace default icons with custom SVG files. The library covers geometry manipulation, visual filter application, and im

    Tracks spatial interactions such as object movement and scaling to trigger corresponding application logic.

    JavaScriptcanvasdrawingfilter
    在 GitHub 上查看↗7,652
  • olifolkerd/tabulatorolifolkerd 的头像

    olifolkerd/tabulator

    7,550在 GitHub 上查看↗

    Tabulator is an interactive data table library and virtual DOM data grid used to create high-performance tables from JSON or arrays. It functions as a hierarchical data viewer and a spreadsheet interface component, capable of rendering thousands of records efficiently through viewport-based virtualization and progressive loading. The library distinguishes itself by providing a full spreadsheet interface mode with multi-sheet management, cell range selection, and bulk copy-paste capabilities. It supports complex data architectures, including nested data field mapping, expandable tree structure

    Dispatches events for cell, row, and column interactions such as clicks and mouse movements.

    JavaScriptajaxcdnjsdata
    在 GitHub 上查看↗7,550
  • jsfiddle/togetherjsjsfiddle 的头像

    jsfiddle/togetherjs

    7,006在 GitHub 上查看↗

    Togetherjs is a real-time collaboration framework designed to synchronize application state, cursors, and navigation across multiple user sessions. It provides a synchronization tool for shared browsing and a signaling server to facilitate peer-to-peer communication. The project integrates audio chat and media streaming via peer-to-peer technology, allowing collaborators to engage in live voice communication. It includes a presence and identity manager to map session participants to custom profiles, names, and avatars. The framework covers a broad surface of collaborative capabilities, inclu

    Displays remote mouse cursors and click events to show where other users are focusing on a page.

    JavaScript
    在 GitHub 上查看↗7,006
  • mdn/dom-examplesmdn 的头像

    mdn/dom-examples

    4,005在 GitHub 上查看↗

    该项目是一个函数式代码示例和可运行演示的参考库。它提供了使用浏览器 API、CSS 特性、DOM 操作和 Web 组件的实现指南及实用代码片段。 该集合展示了现代样式能力的实时演示,包括高级布局模式和绘图 API。它还包含使用 Shadow DOM 结构构建可重用自定义元素的参考示例,用于模块化用户界面开发。 该库涵盖了广泛的浏览器功能,包括具有实时视频帧修改功能的媒体流处理、窗口与 iframe 之间的上下文间通信模式,以及程序化 DOM 元素操作。它还提供了设备硬件集成的示例,例如折叠屏的姿态检测,以及用于联系人选择等任务的原生系统接口桥接。 该仓库包含旨在在实时浏览器环境中执行的 JavaScript 示例。

    Implements a system to monitor pointer events, touch gestures, keyboard input, and gamepad state.

    JavaScriptchannel-messagingdemodom-manipulation
    在 GitHub 上查看↗4,005
  • ksylvest/jquery-gridlyksylvest 的头像

    ksylvest/jquery-gridly

    852在 GitHub 上查看↗

    This project is a jQuery plugin designed for creating responsive grid interfaces that support interactive drag-and-drop reordering and manual resizing of elements. It provides a framework for managing structured layouts where content can be organized into a grid system that automatically adjusts to maintain visual alignment. The library enables users to customize dashboards by rearranging and scaling widgets through mouse-based interactions. It utilizes a coordinate-based system to detect collisions and ensure that elements snap into valid slots, while providing callback functions to monitor

    Monitors the reordering of grid elements by capturing position data during user-initiated drag operations.

    CoffeeScriptjquery
    在 GitHub 上查看↗852
  1. Home
  2. User Interface & Experience
  3. Interaction Tracking

探索子标签

  • Component Interaction DispatchingDispatching of events based on user interactions with rows, cells, and columns. **Distinct from Interaction Tracking:** Distinct from Interaction Tracking: focuses on dispatching interaction events for table components rather than spatial coordinate calculation.
  • Input Event TrackingCapturing raw mouse and touch interactions to update component state. **Distinct from Interaction Tracking:** Focuses on general input event capture for state updates rather than spatial coordinate calculations for drag-and-drop.
  • Remote Cursor TrackingVisual tracking and display of other users' mouse positions and click events on a shared page. **Distinct from Interaction Tracking:** Specifically handles the visual representation of remote user presence via cursors, not just coordinate calculation.