GithubHelp home page GithubHelp logo

sky790312 / nextjs-reactive-dragable-project Goto Github PK

View Code? Open in Web Editor NEW
0.0 2.0 0.0 164 KB

a small sample project which contain all real project need. (with redux)

JavaScript 5.99% TypeScript 94.01%

nextjs-reactive-dragable-project's Introduction

nextjs-drabbable-modal-calculator-project

a small sample project which contain all real project need. (with redux)

image

How to use

check the package.json.

feature

  • Should have Fold/Unfold when click on the right-rectangle at the left side of the track name
  • Should be able to drag the transition bar, left transition handler and right transition handler to change delay and duration.
  • When dragging the transition bar, it should change delay only.
  • When dragging the left transition handler, it should change delay and duration.
  • When dragging the right transition handler, it should change duration only.
  • When changing delay and duration, you should also update other tracks which are related to the selected one.
  • If transition bars are too long, you need to have scroll for it. But the track name panel should be fixed.
  • When a track is selected/hovered, we should highlight both Track Name block and Transition Bar block. (The whole row)

Checklist

  • Implement page switching
  • Implement element selecting
  • Implement property updating
  • Implement Drag-and-drop on Canvas
  • Implement doublie-click to rename (Element and Page)
  • Write test cases
  • Have no performance issue
  • Nested element list (optional)

nextjs-reactive-dragable-project's People

Contributors

sky790312 avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.