首页 前端知识 HTML5新增的拖拽属性draggable,怎么实现拖拽?

HTML5新增的拖拽属性draggable,怎么实现拖拽?

2024-04-29 12:04:35 前端知识 前端哥 577 122 我要收藏

draggable定义和用法:

1、draggable 属性规定元素是否可拖动。

2、提示: 链接和图像默认是可拖动的。

3、提示: draggable 属性经常用于拖放操作。

注意:draggable 属性是 HTML5 新增的。

设置属性值

描述
true规定元素是可拖动的。
false规定元素是不可拖动的。
auto使用浏览器的默认特性。

使用语法:<element draggable="true|false|auto"> 

代码演示:

//拖拽功能示例

html:
<div id="div1">
    <p id="drag1" draggable="true" ondragstart="dragStart(event)"     
     ondrop="drop(event)" ondragend="dragEnd(event)">拖拽标签</p>
</div>


js:

//p标签定义拖拽开始
function dragStart(e){
   //拖拽前操作
}

//拖拽移动
function drop(e){
    e.preventDefault();
}

//结束拖拽
function dragEnd(e){
    e.preventDefault();
}

拓展一下其他方法:

        其实还有一种方法,如果是jquery项目,可以用jquery-ui.js的脚本,这样就可以不用在标签上面设置draggable='true'和绑定一堆事件了。

//使用标签绑定draggable的html:
<html>
    <div id="div1">
        <p id="drag1" draggable="true" ondragstart="dragStart(event)"     
         ondrop="drop(event)" ondragend="dragEnd(event)">拖拽标签</p>
    </div>
</html>

//使用jquery-ui.js后的html标签示例
<html>
    <div id="jquery_div">
        <p id="jquery_drag">拖拽标签</p>
    </div>
</html>

<script src="/jquery-ui.js"></script>
<script>
    //按需使用
    $('#jquery_drag').draggable({
       //helper: "clone",         //拖动时克隆,默认是 original
       //axis:"x",                //拖动方向
       containment:"#jquery_div",    //一个容器,div就只能在容器的范围内活动了
       cursor: "move",            //拖动时鼠标指针的状态 ,
       cursorAt:{top:10},         //拖动的时候鼠标指针的位置,相对被拖动对象的边框,单位px
       opacity: 0.40,             //设置对象被拖动时的透明度
       handle: "div",             //设置拖动控制器,当鼠标按住控制器的时候,才能拖动对象
       scroll:false,              //设置当拖动超出整个浏览器窗口,是否滚动浏览器
       distance: 20,              //设置当鼠标拖动多少像素时对象才会移动
       //delay: 1000,             //设置延迟时间 单位毫秒
       grid:[50,50],              //设置每次拖动的步进 单位px
       dragPrevention:['input'],  //设置被拖动的div碰到那些dom元素时停止
       start:function(e){},    //开始拖动执行的函数
       drag:function(e){},     //拖动时执行的函数
       stop:function(e){}      //拖动停止执行的函数
    });
    
    //默认方式:什么都不定义也可以拖动
     $('#jquery_drag').draggable();

</script>

Tips:文中如有疑问或者错处,可以私信“且慢码农”。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6424.html
标签
评论
发布的文章

HTML5本地存储

2024-05-06 09:05:10

HTML5和CSS3新特性

2024-04-16 17:04:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!