我最近出席了一系列的研讨会，HTML5这个主题在这些会上反复出现。出于好奇我略看了几眼后，开始觉得应该好好的挖掘一下HTML5，看看它究竟会给我们今天技术上带来哪些好处。一个特别有意思的东西就是拖拽功能编程接口…早期的HTML编程开发者一直对此渴望却不可及。我感觉这个功能非常有用…拖拽功能的实现已经成了几个不费吹灰之力的函数调用了。

　　为了演示拖拽用例，我要创建一个简单的网络配置工具(UI),管理员可以用它来收集资源。你能在各个区域之间拖拽资源，往区域里添加资源，删除没有用的资源。出于教学的目的，我尽量使这个例子简单，但可以看到，依据这些基本的做法，你可以开发出一个全功能的网络管理工具。

　　下面就是我的例子的效果图：

　　实现拖拽功能的关键方法非常的简单，就像下面写的这样：

    function dragIt(target, e){
        e.dataTransfer.setData(’SpanImg’, target.id);
    }

    function dropIt(target, e){
        var id = e.dataTransfer.getData(’SpanImg’);
        target.appendChild(document.getElementById(id));
        e.preventDefault();
    }        

        

        
        
      
        
it知识库：HTML5 – 一个拖拽功能的例子，转载需保留来源！
        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。