drag n drop w3.org first example on jsfiddle

Question

Hello I copied the example from w3.org about drag n drop

http://www.w3.org/html/wg/drafts/html/master/editing.html#dnd

 <p>What fruits do you like?</p>
<ol ondragstart="dragStartHandler(event)">
 <li draggable="true" data-value="fruit-apple">Apples</li>
 <li draggable="true" data-value="fruit-orange">Oranges</li>
 <li draggable="true" data-value="fruit-pear">Pears</li>
</ol>
<script>
  var internalDNDType = 'text/x-example'; // set this to something specific to your site
  function dragStartHandler(event) {
    if (event.target instanceof HTMLLIElement) {
      // use the element's data-value="" attribute as the value to be moving:
      event.dataTransfer.setData(internalDNDType, event.target.dataset.value);
      event.dataTransfer.effectAllowed = 'move'; // only allow moves
    } else {
      event.preventDefault(); // don't allow selection to be dragged
    }
  }
</script>

it doesn't seem to work on my jsfiddle

http://jsfiddle.net/sivi/3YSLL/

Someone can point me to the problem. I am quite new to programming so any help will be grated.

Answer 1

The issue you have is that you put the javascript code inside of window onload (in addition to the fact that your fiddle is set to also put it onload). In this way, the function only exists within the onload function and is not accessible in the global scope. If you remove this (and set your fiddle to nowrap) it will work:

http://jsfiddle.net/3YSLL/1/

However, without the other code in the examples, there isn't much to see.

// MUST BE IN THE GLOBAL SCOPE
var internalDNDType = 'text/javascript'; // set this to something specific to your site
 function dragStartHandler(event) {
     /* ... */
 }