您的位置：首页 > Web前端 > HTML5

html5 的拖放

2016-07-17 22:11 459 查看
html

HTML5中实现拖放效果
在Web开发中，我们要实现拖放效果，需要借助Javascript。今天让我们使用Html5实现它：

先看html核心代码:

<div>

[code]<p>把黄色小方块拖入到红色大方框中</p>
</div>
<divid="item"draggable="true">
</div>
<divid="drop">
</div>

[/code]
draggable属性是html5新增加的，它有三个值true,false,auto.true是可以拖，false是不可以，auto由用户浏览器是否支持而定。更多请可以参考官方文档.
加上一点儿样式:

<styletype="text/css">

[code]#drop
{
width:300px;
height:200px;
background-color:#ff0000;
padding:5px;
border:2pxsolid#000000;
}
#item
{
width:100px;
height:100px;
background-color:#ffff00;
padding:5px;
margin:20px;
border:1pxdashed#000000;
}
*[draggable=true]{
-moz-user-select:none;
-khtml-user-drag:element;
cursor:move;
}
*:-khtml-drag{
background-color:rgba(238,238,238,0.5);
}
</style>

[/code]

然后我们来看javascript:


[code]

[/code]
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航