jQuery UI: Draggable Tutorial

Früher unvorstellbar jetzt mit wenigen Schritten möglich, Drag and Drop im Browser ist heutzutage durch die großen Javascript Frameworks für jeden Zugänglich und verwenbar. Drag and Drop wird besonders bei Online Anwendungen verwendet und das auch mit gutem Grund. Online Anwendungen ähneln immer mehr den heutigen Desktop Anwendungen. Für dieses Beispiel wird das jQuery und jQuery UI Framework gebraucht.
In diesem Beispiel wird ein div-Container mit der Größe 200×200 verwendet. Dieser div-Container soll verschiebbar sein. dazu muss folgender Code in Ihr HTML Datei eingefügt werden. Mit der Funktion draggable(); können Sie einen Container oder ein anderes Objekt als “verschiebbar” deklarieren.

$(document).ready(function(){
 $("#dragMe").draggable();
});

Anschließend müssen Sie nur noch den Container in den body einfügen und eventuell eine Größe und Farbe bzw. Rahmen zuordnen, um den Container zu sehen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>jQuery UI - Draggable</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $("#dragMe").draggable();
      });
    </script>
    <style>
     #dragMe {
      width: 200px;
      height: 200px;
      background-color: red;
      border: 1px solid #000000;
      text-align: center;
     }
    </style>
  </head>
  <body>
    <div id="dragMe">
    <b>Drag me</b>
    </div>
  </body>
</html>

Demo ansehen
Projekt downloaden