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; }

  [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>

<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>