学习HTMLT5_1 拖拽

    好久没有开始写blog了，把好些东西都搬到了博客园。一直以来想做一个自己理想的系统，好好练习一下所以学的JAVAEE知识。可惜到现在没有找下一个好的UI搭档，自己又是个色废。只好自己去摸索去做UI，完成后找个色彩感强力一点的UI填充颜色。新的系统打算用HTML5和CSS3 做PC 端，然后连接android和IOS做为手持端。

    计划一天学习一章HTML5，因为有HTML4的基础，学习HTML稍微有一点难度，其中可能有几个原因，第一是资料比较少，好些方法找不到释义，只能用蹩脚的英语去翻文档规范，第二是浏览器和编译器 对HTML5 还是很好，第三是自己粗心和浮躁的毛病没有一点点改变。

看着 W3School 教程 (http://www.w3school.com.cn/html5/html_5_draganddrop.asp)  开始学习。

附上一个HTML5 事件的地址(http://www.w3school.com.cn/html5/html5_ref_eventattributes.asp) 也是 W3School 的 

开始上代码。

目录结构

 

js 文件

/*event.preventDefault() 来避免浏览器对数据的默认处理;*/

/*
 * event.target 返回触发此事件的元素（事件的目标节点）
 * event.dataTransfer 对象 ， 拖拽对象时发送数据和值。
 * event.dataTransfer 对象，有2个方法
 * event.dataTransfer.setDate(arg1,ag2)  拖拽时 设置对象数据和值
 * arg1 参数 为 String   指定被拖动数据的类型 ,参数值为”Text“ 和"url"
 * arg2 参数 为 一个变体类型参数，指定被拖动的数据。该数据可以是文本，图片。
 * event.dataTransfer.setDate(arg1)  得到拖拽数据的 数据。
 * arg1 为 String   指定被拖动数据的类型 ,参数值为”Text“ 和"url"
 * 
*/

// 当开始拖拽时,设置拖拽对象，发送数据和值
function onDrag(ev){
    ev.dataTransfer.setData("Text",ev.target.id);
}

//当拖拽中
function  drag(ev){
    ev.preventDefault();
    //获得拖拽的数据
    var obj =ev.dataTransfer.getData("Text");
    //得到拖拽的对象，并追加到当前事件对象的子节点
    ev.target.appendChild(document.getElementById(obj));
}

// 拖拽结束时
function overDrag(ev){
    ev.preventDefault() ;
} 
<!DOCTYPE html>
<html >
    <head>
        <script type="text/javascript" src="../js/Drag.js">
        </script>
    </head>

    <body style="">
            <div  style="border:1px solid yellow;height: 500px; width: 500px;position:relative;" id="dv1">
                <div style="border:1px solid red;height: 200px; width: 200px;float: left;margin-top: 10px;margin-left: 10px;" id="dv2">
                    <img id='img1'  draggable="true" ondragstart="onDrag(event)"   src="../img/a.jpg"/ >
                </div>
                <div id ='dv3' ondrop="drag(event)" ondragover="overDrag(event)" style="border:1px solid blue;height: 200px; width: 200px;margin-top: 10px;margin-right: 10px; float: right;">
                </div>
            </div>
    </body>
</html>

 

  运行效果：

     拖拽前

　　　　

     拖拽后

　　　　

 

      2点开始看教程，弄清每一个方法，每一个事件，大概到3点左右，之后开始编码。到6点完成。中间调试到了2个小时左右，期间粗心的问题不说，唯一个比较致命的问题没有给<img> 标签加id

    

 <img  draggable="true" ondragstart="onDrag(event)"   src="../img/a.jpg"/ >

　　这样行代码中 没有为 <img> 标签 加ID,  为什么没有加ID 会错，来看这行JS代码

function  drag(ev){
    ev.preventDefault();
    //获得拖拽的数据
    var obj =ev.dataTransfer.getData("Text");
    //得到拖拽的对象，并追加到当前事件对象的子节点
    ev.target.appendChild(document.getElementById(obj));
}

　因为它需要得到对象ID的，并追加到 当前事件对象中。

 

posted on 2013-07-28 06:44  sk_Wing  阅读(254)  评论(0)  编辑  收藏  举报

导航