BestHub
Sign in
Tagged articles
39 articles
Page 1 of 1
Architect's Guide
Architect's Guide
May 13, 2026 · Big Data

Next‑Gen Visual Drag‑Drop Data Flow Platform: Features, Architecture, and Performance

The article introduces a visual drag‑and‑drop data flow platform that unifies stream and batch processing, offers version control, automatic fault tolerance, configurable data permissions, comprehensive monitoring, data alignment, and query templates, and presents single‑instance performance benchmarks of over 30k and 60k ops/s.

Data AlignmentData FlowDrag-and-Drop
0 likes · 7 min read
Next‑Gen Visual Drag‑Drop Data Flow Platform: Features, Architecture, and Performance
DaTaobao Tech
DaTaobao Tech
Aug 18, 2025 · Frontend Development

Mastering Complex Drag-and-Drop for Shopping Cart UI

This article provides an in‑depth technical walkthrough of the iCart shopping‑cart drag‑and‑drop feature, detailing the architecture, grouping rules, collision handling, non‑droppable logic, hover calculations, placement callbacks, performance optimizations, and future improvements for a smooth, stable user experience.

Drag-and-DropShopping CartWeex
0 likes · 17 min read
Mastering Complex Drag-and-Drop for Shopping Cart UI
37 Interactive Technology Team
37 Interactive Technology Team
Jan 22, 2025 · Frontend Development

Design and Development of a Low-Code Form Generation Platform

The article describes the design and development of a low‑code form generation platform built on VueFormMaking, detailing its drag‑and‑drop interface, JSON‑driven component architecture, template configuration and rendering, as well as maintenance practices such as flat configurations, style optimization, testing, and deep‑copy handling for scalability and reliability.

Component ArchitectureDrag-and-DropVue
0 likes · 10 min read
Design and Development of a Low-Code Form Generation Platform
IT Services Circle
IT Services Circle
Oct 30, 2024 · Frontend Development

A Guide to Modern Front‑End Drag‑And‑Drop Libraries and Migration Strategies

This article reviews the recent deprecation of react‑beautiful‑dnd and presents several modern front‑end drag‑and‑drop alternatives—including Pragmatic Drag and Drop, VueDraggablePlus, dnd‑kit, react‑dnd, and Swapy—while offering migration strategies, usage examples, and GitHub resources for each library.

Drag-and-DropLibraryReact
0 likes · 6 min read
A Guide to Modern Front‑End Drag‑And‑Drop Libraries and Migration Strategies
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 29, 2024 · Frontend Development

drag-kit: A Lightweight Drag‑and‑Drop Library for Vue, React and Plain JavaScript

This article introduces the drag-kit library, explains why it is a good choice for high‑performance, cross‑iframe, responsive drag‑and‑drop interactions, provides quick‑start code examples, details its core features and advanced options, and shows how to integrate it with Vue, React and vanilla JavaScript.

Drag-and-DropJavaScriptReact
0 likes · 12 min read
drag-kit: A Lightweight Drag‑and‑Drop Library for Vue, React and Plain JavaScript
Selected Java Interview Questions
Selected Java Interview Questions
Sep 8, 2024 · Backend Development

Two Backend Approaches for Drag‑and‑Drop Sorting: Array vs. Doubly Linked List

The article compares two backend implementations for drag‑and‑drop ordering—using a simple position column (array model) and a doubly linked list with prev_id and sibling_id—detailing their MySQL schemas, update logic, performance trade‑offs, and practical considerations such as pagination and locking.

ArrayDrag-and-Droplinked list
0 likes · 9 min read
Two Backend Approaches for Drag‑and‑Drop Sorting: Array vs. Doubly Linked List
Architect's Guide
Architect's Guide
Jul 18, 2024 · Frontend Development

AS-Editor: Vue-based Visual Drag-and-Drop Page Builder

AS-Editor is a Vue-powered visual drag‑and‑drop page builder that generates UI from JSON, offering installation via npm, step‑by‑step usage with customizable components, and an open‑source repository for enhancing front‑end development efficiency, even in mobile projects.

Drag-and-DropUI GenerationVue
0 likes · 3 min read
AS-Editor: Vue-based Visual Drag-and-Drop Page Builder
MoonWebTeam
MoonWebTeam
Apr 30, 2024 · Frontend Development

Mastering Drag‑And‑Drop: From HTML5 APIs to Moveable’s Custom Able Extensions

This article explores browser drag‑and‑drop capabilities, compares native HTML5 DnD, mouse/touch events, and Canvas approaches, reviews popular libraries such as React DnD, Moveable and Interact.js, and provides a step‑by‑step guide to extending Moveable with custom ables for intelligent placement.

Drag-and-DropReactcustom-ables
0 likes · 20 min read
Mastering Drag‑And‑Drop: From HTML5 APIs to Moveable’s Custom Able Extensions
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Mar 27, 2024 · Frontend Development

Implementing a Custom Grid Drag‑and‑Drop Layout with Vue

This article explains how to build a Vue‑based, 6‑column by 4‑row grid layout where components can be dragged from a material bar and dropped onto grid cells, covering drag‑and‑drop API usage, grid sizing, collision detection, styling during drag, and secondary dragging support.

CSS GridDrag-and-DropTypeScript
0 likes · 17 min read
Implementing a Custom Grid Drag‑and‑Drop Layout with Vue
政采云技术
政采云技术
Oct 11, 2023 · Frontend Development

A Comprehensive Guide to React Grid Layout: Usage, Breakpoint & Grid Implementations, Drag‑and‑Drop and Resize Features

This article introduces React Grid Layout, explains how to install and configure it, and provides detailed implementations of responsive breakpoint layouts, grid positioning, component rendering, drag‑and‑drop handling, and resizing logic, complete with code examples and performance considerations.

Drag-and-DropReactResize
0 likes · 20 min read
A Comprehensive Guide to React Grid Layout: Usage, Breakpoint & Grid Implementations, Drag‑and‑Drop and Resize Features
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 1, 2023 · Frontend Development

A Comprehensive Guide to Building Drag‑and‑Drop Low‑Code Platforms

This article provides a systematic overview of drag‑and‑drop low‑code platforms, covering their advantages and drawbacks, core architecture (protocols, material area, canvas, property panel, top bar), implementation details with code examples, and best practices for extensibility, sandboxing, and code generation.

Component ArchitectureDrag-and-DropUI Builder
0 likes · 23 min read
A Comprehensive Guide to Building Drag‑and‑Drop Low‑Code Platforms
Sohu Tech Products
Sohu Tech Products
Aug 9, 2023 · Big Data

DataEase: A User-Friendly Open-Source BI Tool for Chinese Users

DataEase is a Chinese-developed open-source BI tool offering one‑command deployment, drag‑and‑drop dashboard creation, default configurations, dataset association, and a template market, making it more user‑friendly for Chinese users than foreign tools like Superset and Metabase.

Chinese usersData visualizationDataEase
0 likes · 10 min read
DataEase: A User-Friendly Open-Source BI Tool for Chinese Users
360 Quality & Efficiency
360 Quality & Efficiency
Apr 14, 2023 · Frontend Development

Implementing a Resizable, Drag‑Drop Gantt Chart Component with Vue 3

This article explains how to build a full‑featured Gantt chart in Vue 3, covering the UI layout with left‑hand tree panels and right‑hand timeline, synchronization of scrolling and state, draggable and resizable task bars, date‑generation utilities for various time scales, and performance considerations for large data sets.

Drag-and-DropGantt ChartJavaScript
0 likes · 16 min read
Implementing a Resizable, Drag‑Drop Gantt Chart Component with Vue 3
Zhengtong Technical Team
Zhengtong Technical Team
Dec 30, 2022 · Frontend Development

Implementation of Component Drag‑and‑Drop in the Wukong Low‑Code Visual Platform

This article explains how the Wukong low‑code visual platform implements component drag‑and‑drop, covering material‑to‑canvas dragging, intra‑canvas movement, resizing via eight handles, alignment guide generation, performance optimizations using CSS transforms, and component encapsulation with Vue 3.

AlignmentComponentDrag-and-Drop
0 likes · 14 min read
Implementation of Component Drag‑and‑Drop in the Wukong Low‑Code Visual Platform
JD Retail Technology
JD Retail Technology
Dec 21, 2022 · Frontend Development

Introduction and Design of JD Waterdrop Low-Code Canvas

The article presents an overview of JD's Waterdrop low-code platform, detailing the canvas concept, types, research on existing solutions, development goals, design architecture, adaptive layout algorithms, common layout patterns, and future plans for enhancing the front‑end building experience.

CanvasDrag-and-DropUI design
0 likes · 11 min read
Introduction and Design of JD Waterdrop Low-Code Canvas
Sohu Tech Products
Sohu Tech Products
Dec 14, 2022 · Mobile Development

Implementing a Drag‑and‑Bounce Custom View with Explosion Effect in Android (Kotlin)

This tutorial explains how to build an Android custom view that lets a large circle be dragged, scales a smaller circle based on distance, snaps back with a bounce animation when released inside a boundary, or plays an explosion sequence when released outside, using Kotlin, Bézier curves, and WindowManager integration.

AndroidCustom ViewDrag-and-Drop
0 likes · 19 min read
Implementing a Drag‑and‑Bounce Custom View with Explosion Effect in Android (Kotlin)
ELab Team
ELab Team
Nov 11, 2022 · Frontend Development

How No‑Code Platforms Transform Frontend Development: Architecture, Canvas & Drag‑Drop Techniques

This article explores the rise of no‑code/low‑code builder platforms, detailing their core concepts, architecture, UIDL specifications, sandboxing, drag‑and‑drop mechanics, smart snapping, component insertion, and event handling, offering practical insights for frontend engineers building modern visual editors.

CanvasDrag-and-DropFrontend Architecture
0 likes · 42 min read
How No‑Code Platforms Transform Frontend Development: Architecture, Canvas & Drag‑Drop Techniques
Watermelon Frontend Tech Team
Watermelon Frontend Tech Team
Nov 10, 2022 · Frontend Development

Unlocking No‑Code Platform Power: Inside the Frontend Canvas Architecture

This article explores how No‑Code & Low‑Code (NCLC) platforms transform frontend development by introducing a canvas‑editor and generator architecture, UIDL communication, IOC modular design, layered rendering, event systems, drag‑and‑drop mechanics, smart snapping, and component insertion techniques.

Drag-and-DropFrontend ArchitectureNo-code
0 likes · 37 min read
Unlocking No‑Code Platform Power: Inside the Frontend Canvas Architecture
JD Retail Technology
JD Retail Technology
Jun 7, 2022 · Frontend Development

Building a New Product CMS with the Waterdrop Low‑Code Platform: A Best‑Practice Guide

This article details how the Waterdrop low‑code platform was used to rapidly create a new product material‑review CMS embedded in a marketing center, covering requirement analysis, custom component development, visual page building, event orchestration, API integration, permission control, and zero‑ops cloud deployment within a six‑day timeline.

CMSDeploymentDrag-and-Drop
0 likes · 12 min read
Building a New Product CMS with the Waterdrop Low‑Code Platform: A Best‑Practice Guide
Alibaba Terminal Technology
Alibaba Terminal Technology
Apr 7, 2022 · Frontend Development

Building a Powerful Tile Layout System with React‑Grid‑Layout and Low‑Code Engine

This article explains how a low‑code platform redesigned its report page using a tile layout powered by React‑Grid‑Layout, detailing vertical and horizontal squeeze modes, nesting, height‑auto adaptation, mixed tile‑flow layouts, and algorithm optimizations for smoother drag‑and‑drop interactions.

Drag-and-Dropalgorithmlayout
0 likes · 12 min read
Building a Powerful Tile Layout System with React‑Grid‑Layout and Low‑Code Engine
Ctrip Technology
Ctrip Technology
Mar 10, 2022 · Frontend Development

DynamicForm: A React‑Based Visual Dynamic Form Builder for Ctrip’s Lego Platform

The article introduces DynamicForm, a React‑driven visual dynamic form configuration system designed to eliminate repetitive form coding, offering drag‑and‑drop layout, rich control types, validation, data binding, and a modular architecture that streamlines component property management on Ctrip’s Lego platform.

CtripDrag-and-DropDynamic Forms
0 likes · 7 min read
DynamicForm: A React‑Based Visual Dynamic Form Builder for Ctrip’s Lego Platform
ByteFE
ByteFE
Mar 4, 2022 · Frontend Development

Tech Article Recommendations: MDN Redesign, Taro, Vite, DDD, State Machine, Flutter, GIF, Node.js Streams, Browser Inline Import, Frontend Drag-and-Drop

This post curates a variety of technical article recommendations covering frontend innovations like MDN's redesign, Taro, Vite, state‑based architecture, and drag‑and‑drop, plus backend Node.js streams, mobile Flutter, and cross‑platform insights for developers seeking to stay updated.

DDDDrag-and-DropFlutter
0 likes · 5 min read
Tech Article Recommendations: MDN Redesign, Taro, Vite, DDD, State Machine, Flutter, GIF, Node.js Streams, Browser Inline Import, Frontend Drag-and-Drop
ELab Team
ELab Team
Jan 14, 2022 · Frontend Development

Mastering HTML5 Drag-and-Drop: Native Implementation, Events, and React Alternatives

This article explains how to implement native HTML5 drag‑and‑drop, details the required draggable attribute, describes all related events, shows a simple JavaScript demo, discusses common pitfalls such as repeated ondragover and ghosting, and compares popular React libraries for drag‑and‑drop.

Drag-and-DropHTML5JavaScript
0 likes · 12 min read
Mastering HTML5 Drag-and-Drop: Native Implementation, Events, and React Alternatives
37 Mobile Game Tech Team
37 Mobile Game Tech Team
Jan 6, 2021 · Frontend Development

Building a Vue‑Based Visual Editor: Architecture, JSON Schema & Drag‑Drop

This article outlines the design and implementation of a Vue‑powered visual editor, covering its three‑part architecture (editor, component library, backend), JSON schema hierarchy, component creation and configuration, state management with Vuex, drag‑and‑drop mechanics, and server‑side rendering.

Component LibraryDrag-and-DropJSON Schema
0 likes · 15 min read
Building a Vue‑Based Visual Editor: Architecture, JSON Schema & Drag‑Drop
JD Retail Technology
JD Retail Technology
Jul 20, 2020 · Frontend Development

Frontend Development Insights from the Flash Intelligent Content Creation Platform: Componentization, Drag‑and‑Drop, and Performance Optimization

This article shares a front‑end engineer's experience building the Flash intelligent content creation platform, covering the evolution of its video module, component‑based architecture with React, drag‑and‑drop implementation, state management using Redux, and build‑time optimizations such as code splitting and lazy loading.

Drag-and-DropRedux
0 likes · 27 min read
Frontend Development Insights from the Flash Intelligent Content Creation Platform: Componentization, Drag‑and‑Drop, and Performance Optimization
政采云技术
政采云技术
Nov 24, 2019 · Frontend Development

Implementing Draggable and Resizable Floating Widgets with Pure JavaScript: Common Pitfalls and Solutions

This article explores the practical challenges of building a draggable and resizable floating UI component using vanilla JavaScript, detailing effective solutions for separating click and drag events, enforcing viewport boundary constraints, and preserving element positioning during dynamic size changes.

Drag-and-DropUI componentsVanilla JS
0 likes · 10 min read
Implementing Draggable and Resizable Floating Widgets with Pure JavaScript: Common Pitfalls and Solutions
HomeTech
HomeTech
Oct 24, 2019 · Frontend Development

Implementation and Architecture of a Shop Storefront Decoration System Using Drag‑and‑Drop, TypeScript, and Gulp

This article explains the design and implementation of a car‑sales e‑commerce storefront editor, covering its three‑area layout, drag‑and‑drop module handling, TypeScript‑based backend processing, and Gulp build pipeline, while also discussing configuration, tasks, and future VR extensions.

Drag-and-DropTypeScriptUI
0 likes · 11 min read
Implementation and Architecture of a Shop Storefront Decoration System Using Drag‑and‑Drop, TypeScript, and Gulp
Youzan Coder
Youzan Coder
Feb 27, 2019 · Frontend Development

How to Build a Cross‑Platform Shop Builder with React, Vue, and Iframe Communication

This article presents a technical design for a multi‑platform shop‑decoration system that shares data via React context, reuses Vue‑based preview components through an iframe, synchronizes updates with a postMessage wrapper, and implements drag‑and‑drop using vuedraggable, providing a scalable solution for PC, H5, and mini‑programs.

Drag-and-DropReactVue
0 likes · 12 min read
How to Build a Cross‑Platform Shop Builder with React, Vue, and Iframe Communication
JD Tech
JD Tech
Apr 3, 2018 · Frontend Development

Implementing a Mobile Drag‑and‑Drop Component with Vue

This article explains how to build a reusable Vue component for mobile drag‑and‑drop, covering Vue's advantages, component structure, touch‑event handling, data‑driven updates, optimization techniques, and differences between mobile and PC implementations, with complete code examples.

ComponentDrag-and-DropMobile
0 likes · 10 min read
Implementing a Mobile Drag‑and‑Drop Component with Vue
JD Retail Technology
JD Retail Technology
Nov 14, 2017 · Mobile Development

Understanding Drag & Drop in iOS: Concepts, APIs, and Implementation

This article explains the iOS Drag & Drop interaction model, covering its core concepts, system integration, multi‑touch features, and step‑by‑step implementation using UIKit APIs such as UIDragInteraction, UIDropInteraction, and NSItemProvider with Swift code examples.

Drag-and-DropSwiftUIDragInteraction
0 likes · 12 min read
Understanding Drag & Drop in iOS: Concepts, APIs, and Implementation
Baixing.com Technical Team
Baixing.com Technical Team
Oct 19, 2017 · Frontend Development

How to Build a Drag‑Drop Site Builder with Vue.js: From Data Model to Rendering

This article explains how to design and implement a Vue.js‑based website builder that lets users create multi‑page sites by dragging modules, covering requirement analysis, JSON data modeling, dynamic component rendering, state management with Vuex, and drag‑and‑drop integration.

Drag-and-DropFrontend ArchitectureJSON data model
0 likes · 14 min read
How to Build a Drag‑Drop Site Builder with Vue.js: From Data Model to Rendering
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
May 16, 2017 · Frontend Development

Master Drag-and-Drop in JavaScript: Three Ways to Build a Reusable Drag Object

This article walks you through three approaches to implement drag-and-drop in JavaScript—plain code, a native object wrapper, and a jQuery extension—covering essential concepts like transform compatibility, event handling, position calculations, and object-oriented encapsulation, with detailed code examples and visual diagrams.

DOMDrag-and-DropObject-Oriented
0 likes · 12 min read
Master Drag-and-Drop in JavaScript: Three Ways to Build a Reusable Drag Object