HTML5 – JavaScript setDragImage Beispiel

Dank HTML5 gibt es modernen Browser drag und drop-Events, welche natives Drag & Drop ermöglichen. Es ist sogar vorgesehen, dass man das Bild (welches während eines Drag-Vorgangs angezeigt wird) ändern kann. Dazu muss man sich der setDragImage bedienen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    <div id="wrapper" 
         style="width:200px;height:200px;background-color:blue;"
         ondragstart="handleDragStart(event)">
    </div>
    <script type="text/javascript">
      var divWrapper = document.getElementById('wrapper');
      divWrapper.setAttribute('draggable', 'true'); // for Chrome
      divWrapper.style.backgroundColor = 'red';
 
      function handleDragStart(event)
      {
        // Drag Image
        var image = document.createElement('img');
        image.src = './images/logo.png';
        // Event
        event.dataTransfer.effectAllowed = 'move';
        event.dataTransfer.setData('text/html', this.innerHTML);
        event.dataTransfer.setDragImage(image, -10, -10);
      }
    </script>

Anstelle eines Bildes (img) ist es auch erlaubt das neue HTML5 canvas-Element einzusetzen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    <div id="wrapper" 
         style="width:200px;height:200px;background-color:blue;"
         ondragstart="handleDragStart(event)">
    </div>
    <script type="text/javascript">
      var divWrapper = document.getElementById('wrapper');
      divWrapper.setAttribute('draggable', 'true'); // for Chrome
      divWrapper.style.backgroundColor = 'red';
 
      function handleDragStart(event)
      {
        // Drag Image
        var canvas = document.createElement('canvas');
        canvas.width = canvas.height = 100;
        var context = canvas.getContext('2d');
        context.fillStyle = 'rgb(255, 0, 255)';
        context.fillRect(0, 0, canvas.width, canvas.height);
        // Event
        event.dataTransfer.effectAllowed = 'move';
        event.dataTransfer.setData('text/html', this.innerHTML);
        event.dataTransfer.setDragImage(canvas, -10, -10);
      }
    </script>

Hinweise:

  • Damit ein Objekt die Drag-Eigenschaft aufweist, muss es das Attribut draggable="true" erhalten
  • Damit das draggable-Attribut auch im Safari funktionert, muss folgender CSS-Stil gesetzt werden:
    1
    2
    3
    4
    5
    6
    7
    
          [draggable=true] 
          {
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            user-select: none;
          }
  • Für den Mozilla Firefox ist es notwendig, dass es ein ondragstart-Event gibt
  • Es muss zuerst dataTransfer.setData aufgerufen werden, damit dataTransfer.setDragImage funktioniert
  • dataTransfer.setData kann im Firefox nur in einem ondragstart-Event benutzt werden
  • dataTransfer.setDragImage erwartet ein Bild und eine Position (x,y). Die Position gibt ausgehend vom Mauszeiger an, an welcher Stelle das Drag Image angezeigt wird
  • Der Google Chrome erlaubt kein canvas-Element als Bild in setDragImage. Deshalb muss vorher das canvas-Objekt mit toDataURL in eine BASE64-kodierte Zeichenkette umgewandelt werden:
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    
        <div id="wrapper" 
             style="width:200px;height:200px;background-color:blue;"
             ondragstart="handleDragStart(event)">
        </div>
        <script type="text/javascript">
          var divWrapper = document.getElementById('wrapper');
          divWrapper.setAttribute('draggable', 'true'); // for Chrome
          divWrapper.style.backgroundColor = 'red';
     
          function handleDragStart(event)
          {
            // Drag Image
            var image = new Image();
            image.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
            var canvas = document.createElement('canvas');
            canvas.width = image.width;
            canvas.height = image.height;
            var context = canvas.getContext('2d');
            context.drawImage(image, 0, 0);
            var canvasImage = new Image();
            canvasImage.src = canvas.toDataURL('image/png');
            // Event
            event.dataTransfer.effectAllowed = 'move';
            event.dataTransfer.setData('text/html', this.innerHTML);
            event.dataTransfer.setDragImage(canvasImage, -10, -10);
          }
        </script>