在nsfiddle上拖动w3.org第一个例子

时间:2013-09-22 20:44:30

标签: javascript html5 drag-and-drop

您好我从w3.org复制了关于拖放

的示例

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>

它似乎不适用于我的jsfiddle

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

有人可以指出我的问题。我对编程很陌生,所以任何帮助都会被磨碎。

1 个答案:

答案 0 :(得分:1)

您遇到的问题是您将javascript代码放在窗口onload中(除了您的小提琴设置为也将其设置为onload)。这样,该函数仅存在于onload函数中,并且在全局范围内不可访问。如果你删除它(并将你的小提琴设置为nowrap)它将起作用:

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

但是,如果没有示例中的其他代码,则没有太多可看的内容。

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