Features (用鼠标拖动我！)

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

Reposition items without interrupting the flow of the page

Using the CSS3 transformproperty, 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 draggableclassname 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">

            
                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>