html5 Drag and Drop

Drag and Drop

Funktioniert inzwischen in fast allen Browsern.

  • Eins
  • Zwei
  • Drei
  • Vier
  • Fünf
  • Sechs

Der Code

Der Code kann hier angesehen werden

CSS

.sortable li {
  padding:10px;
  border-bottom:2px solid #fff;
  background: #e7e7e7;
}

.sortable li.over {
  background: #ffff00;
}

Damit uns die Markierung nicht die Suppe versalzt müssen noch ein paar Styles gesetzt werden:

*[draggable=true] {
  -moz-user-select:none;
  -khtml-user-drag: element;
  cursor: move;
}

*:-khtml-drag {
  background-color: rgba(255,255,0, 0.5) !important;
}

Ressourcen