Schlagwort: setDragImage

Image preloader with jQuery

Today I saw a tiny JavaScript code on Stack Overflow which can be used as a jQuery plugin for preloading images. It is very handy and can be used easily:

jQuery.fn.preload = function() 
{
  this.each(function()
  {
    $('<img/>')[0].src = this;
  });
}
 
jQuery(document).ready(function($)
{    
  $(['./images/image1.png', './images/image2.png']).preload();
});

I use this function to preload drag images which are used by event.dataTransfer.setDragImage but you can still preload everything else. It makes also much sense for hover images.

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>