每天一个小知识点21（拖拽效果）

案例1:


拖拽一段文字到一个区域，复制进去


#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}


<div id="div1" ></div>
<br />


<p id="drag">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>




这里p中的类容就是待拖拽的东西 div1为目标区域，首先要让这段文字拖拽，第一步要设置p 元素的draggable属性为"true"


然后绑定事件--开始拖拽事件
 ondragstart="drag(event)"


我们应该设置data在js中设置发送
e.dataTransfer.setData("Text",e.target.id);


然后我们应该在规定好的区域开始接受，接受之前给div绑定事件
ondrop="drop(event)"


我们开始在js中写接受
 var data= e.dataTransfer.getData('Text')---接收数据
 e.target.appendChild(document.getElementById(data));--将接受的数据添加到当前区域


注意：
1.  若想触发ondrop事件，ondragover 中需要阻止默认事件（元素默认是不允许放置的）。


2.  在Firefox 3.5+中，如果是把图像拖放到放置目标上，页面就会转向图像文件；而如果是把文本拖放到放置目标上，则会导致无效URL错误，因此，为了让Firefox支持正常的拖放，还要取消drop事件的默认行为，阻止它打开URL。


组织浏览器默认行为
e.preventDefault();


当接收完毕之后再组织默认行为一次
ondragover="allowDrop(event)"
 function allowDrop(e)
    {
        e.preventDefault();
    }


完整代码


<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>
<br />
<p id="drag" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>


<script type="text/javascript">
    function allowDrop(e)
    {
        e.preventDefault();
    }
    function drag(e){
        e.dataTransfer.setData("Text",e.target.id);
    }
    function drop(e){
        var data= e.dataTransfer.getData('Text')
        e.target.appendChild(document.getElementById(data));
        e.preventDefault();
    }
</script>






拖拽图片的案例




1.创建拖拽对象 


给需要拖拽的元素设置draggable属性，它有三个值： 


A.   true：元素可以被拖拽；
B.   false：元素不能被拖拽；
C.   auto： 浏览器自己判断元素是否能被拖拽。


2.处理拖拽事件


当拖拽对象的时候会触发拖拽事件包括： 


A.   dragstart：当元素拖拽开始触发； 
B.   drag：在元素拖拽过程中触发； 
C.   dragend：元素拖拽结束时触发。




3.创建投放区 


当拖拽对象进入投放区的时候会触发相关的事件


A.   dragenter：当拖拽对象进入投放区时触发；
B.   dragover：拖拽对象在投放区内移动时触发； 
C.   dragleave：拖拽对象没有投放到投放区，离开投放区的 时候触发； 
D.   drop：拖拽对象投放在投放区时触发。 


注意：dragenter、dragover可能会受到默认事件的影响，所以在这两个事件当中使用 e.preventDefault();来阻止事件默认事件




4.使用dataTransfer传递数据 


当需要拖拽对象向投放区传递数据的时候用到 dataTransfer有下面的属性和方法：


A.     types：返回数据的格式；
B.     getData(<format>)：返回指定格式数据；
C.     setData(<format>, <data>)：设置指定格式数据； 
D.     clearData(<format>)：移除指定格式数据；
E.     files：返回已经投放的文件的信息数组。


<div id="layer1">
    <img src="images/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
</div>
<div id="layer2" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<script type="text/javascript">
    function drag(e){
        e.dataTransfer.setData('Text', e.target.id);
    }
    function allowDrop(e){
        e.preventDefault();//
    }
    function drop(e){
        var data= e.dataTransfer.getData('Text');
        e.target.appendChild(document.getElementById(data));
        e.preventDefault();//
    }
</script>