HTML5新增的拖拽属性draggable，怎么实现拖拽？

置顶且慢码农

已于 2023-03-15 10:07:48 修改

阅读量6.4k

点赞数 6

分类专栏： JavaScript 文章标签： html5 前端 html javascript

于 2022-11-26 11:46:20 首次发布

本文链接：https://blog.csdn.net/LiAly66/article/details/128049772

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

draggable定义和用法：

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

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

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

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

设置属性值

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

值	描述
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:文中如有疑问或者错处，可以私信“且慢码农”。