Features (用鼠标拖动我！)

下面的文字和图标都是可以拖动的哦！

Reposition items without interrupting the flow of the page

Using the CSS3 transform property, the layout of the webpage will not be altered while you drag.


Ridiculously easy to use

Draggin.js has incredibly simple syntax: just give an element the draggable classname to render an instantly draggable element.


Editable text!

Draggin.js provides user-editable text elements that are also easily dragged around to help you craft the ultimate user interface. Double click on this paragraph to see for yourself, and click anywhere outside of the text to stop editing.

示例演示

Simple Draggable Element

<img class="draggable" src="img/cursor.svg" alt="Cursor Icon">
Cursor Icon

Simple Editable & Draggable Text

<h1 class="draggable text">Hello, World!</h1>

Hello, World!

Dragging a List with Undraggable Contents

<ul class="draggable">
    <li>Hello,</li>
    <li>World!</li>
</ul>

  • Hello,
  • World!
  • Drag
  • My
  • Border!

Editable & Undraggable Text

<h1 class="draggable text">Hello, World!</h1>

Hello, World!