Fork me on GitHub

Draggable

John
Joao
Jean

List

[
  {
    "name": "John",
    "id": 0
  },
  {
    "name": "Joao",
    "id": 1
  },
  {
    "name": "Jean",
    "id": 2
  }
]

Draggable 1

John 0
Joao 1
Jean 2
Gerard 3

Draggable 2

Juan 0
Edgard 1
Johnson 2

List 1

[
  {
    "name": "John",
    "id": 1
  },
  {
    "name": "Joao",
    "id": 2
  },
  {
    "name": "Jean",
    "id": 3
  },
  {
    "name": "Gerard",
    "id": 4
  }
]

List 2

[
  {
    "name": "Juan",
    "id": 5
  },
  {
    "name": "Edgard",
    "id": 6
  },
  {
    "name": "Johnson",
    "id": 7
  }
]

Draggable 1

John
Joao
Jean
Gerard

Draggable 2

Juan
Edgard
Johnson

List 1

[
  {
    "name": "John",
    "id": 1
  },
  {
    "name": "Joao",
    "id": 2
  },
  {
    "name": "Jean",
    "id": 3
  },
  {
    "name": "Gerard",
    "id": 4
  }
]

List 2

[
  {
    "name": "Juan",
    "id": 5
  },
  {
    "name": "Edgard",
    "id": 6
  },
  {
    "name": "Johnson",
    "id": 7
  }
]

Draggable 1

dog 1
dog 2
dog 3
dog 4

Draggable 2

cat 5
cat 6
cat 7

List 1

[
  {
    "name": "dog 1",
    "id": 1
  },
  {
    "name": "dog 2",
    "id": 2
  },
  {
    "name": "dog 3",
    "id": 3
  },
  {
    "name": "dog 4",
    "id": 4
  }
]

List 2

[
  {
    "name": "cat 5",
    "id": 5
  },
  {
    "name": "cat 6",
    "id": 6
  },
  {
    "name": "cat 7",
    "id": 7
  }
]
Press Ctrl to clone element from list 1

Draggable 1

Jesus
Paul
Peter

Draggable 2

Luc
Thomas
John

List 1

[
  {
    "name": "Jesus",
    "id": 1
  },
  {
    "name": "Paul",
    "id": 2
  },
  {
    "name": "Peter",
    "id": 3
  }
]

List 2

[
  {
    "name": "Luc",
    "id": 5
  },
  {
    "name": "Thomas",
    "id": 6
  },
  {
    "name": "John",
    "id": 7
  }
]
Drag using the handle icon

Draggable

  • John
  • Joao
  • Jean

List

[
  {
    "name": "John",
    "text": "",
    "id": 0
  },
  {
    "name": "Joao",
    "text": "",
    "id": 1
  },
  {
    "name": "Jean",
    "text": "",
    "id": 2
  }
]

Transition

  • vue.draggable
  • draggable
  • component
  • for
  • vue.js 2.0
  • based
  • on
  • Sortablejs

List

[
  {
    "name": "vue.draggable",
    "order": 1
  },
  {
    "name": "draggable",
    "order": 2
  },
  {
    "name": "component",
    "order": 3
  },
  {
    "name": "for",
    "order": 4
  },
  {
    "name": "vue.js 2.0",
    "order": 5
  },
  {
    "name": "based",
    "order": 6
  },
  {
    "name": "on",
    "order": 7
  },
  {
    "name": "Sortablejs",
    "order": 8
  }
]

Transition

  • vue.draggable
  • draggable
  • component
  • for
  • vue.js 2.0
  • based
  • on
  • Sortablejs

List

[
  {
    "name": "vue.draggable",
    "order": 1
  },
  {
    "name": "draggable",
    "order": 2
  },
  {
    "name": "component",
    "order": 3
  },
  {
    "name": "for",
    "order": 4
  },
  {
    "name": "vue.js 2.0",
    "order": 5
  },
  {
    "name": "based",
    "order": 6
  },
  {
    "name": "on",
    "order": 7
  },
  {
    "name": "Sortablejs",
    "order": 8
  }
]

Draggable table

IdNameSport
1Abbybasket
2Brookefoot
3Courtenayvolley
4Davidrugby

List

[
  {
    "id": 1,
    "name": "Abby",
    "sport": "basket"
  },
  {
    "id": 2,
    "name": "Brooke",
    "sport": "foot"
  },
  {
    "id": 3,
    "name": "Courtenay",
    "sport": "volley"
  },
  {
    "id": 4,
    "name": "David",
    "sport": "rugby"
  }
]

Draggable table

idnamesport
1Abbybasket
2Brookefoot
3Courtenayvolley
4Davidrugby

List

[
  {
    "id": 1,
    "name": "Abby",
    "sport": "basket"
  },
  {
    "id": 2,
    "name": "Brooke",
    "sport": "foot"
  },
  {
    "id": 3,
    "name": "Courtenay",
    "sport": "volley"
  },
  {
    "id": 4,
    "name": "David",
    "sport": "rugby"
  }
]

Headers

[
  "id",
  "name",
  "sport"
]

Integration with Element+ collapse

Consistency
Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.

List

[
  {
    "title": "Consistency",
    "id": 1,
    "text": [
      "Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;",
      "Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."
    ]
  },
  {
    "title": "Feedback",
    "id": 2,
    "text": [
      "Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;",
      "Visual feedback: reflect current state by updating or rearranging elements of the page."
    ]
  },
  {
    "title": "Efficiency",
    "id": 3,
    "text": [
      "Simplify the process: keep operating process simple and intuitive;",
      "Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;",
      "Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."
    ]
  },
  {
    "title": "Controllability",
    "id": 4,
    "text": [
      "Decision making: giving advices about operations is acceptable, but do not make decisions for the users;",
      "Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."
    ]
  }
]

activeNames

[
  1
]

Draggable with footer

John
Joao
Jean

List

[
  {
    "name": "John",
    "id": 0
  },
  {
    "name": "Joao",
    "id": 1
  },
  {
    "name": "Jean",
    "id": 2
  }
]

Draggable with header

John 1
Joao 2
Jean 3

List

[
  {
    "name": "John 1",
    "id": 0
  },
  {
    "name": "Joao 2",
    "id": 1
  },
  {
    "name": "Jean 3",
    "id": 2
  }
]

First draggable with footer

John 1
Joao 2
Jean 3

Second draggable with header

Jonny 4
Guisepe 5

List

[
  {
    "name": "John 1",
    "id": 0
  },
  {
    "name": "Joao 2",
    "id": 1
  },
  {
    "name": "Jean 3",
    "id": 2
  }
]

List2

[
  {
    "name": "Jonny 4",
    "id": 3
  },
  {
    "name": "Guisepe 5",
    "id": 4
  }
]

Nested draggable

  • task 1

    • task 2

    • task 3

      • task 4

      • task 5

        List

        [
          {
            "name": "task 1",
            "tasks": [
              {
                "name": "task 2",
                "tasks": []
              }
            ]
          },
          {
            "name": "task 3",
            "tasks": [
              {
                "name": "task 4",
                "tasks": []
              }
            ]
          },
          {
            "name": "task 5",
            "tasks": []
          }
        ]