How does the html5draggable attribute achieve the page dragging effect? The method is summarized here!-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

How does the html5draggable attribute achieve the page dragging effect? The method is summarized here!

寻∝梦

Aug 31, 2018 pm 04:45 PM

html

This article mainly tells you about the technology of draggable attribute to achieve the effect of page dragging. Read on, and you will find step by step that this is actually not difficult. Now let us read this article together.

This article is to introduce Draggable (drag) to achieve the dragging effect of page elements, so let’s do it step by step.

1. Loading method (first is the loading method)

1.css style loading:

<div id="box" class="easyui-draggable" style="width:200px;height:150px;background:#F5F6F7;">
    内容部分
</div>

Using css style to load Draggable is convenient and fast, but it is not conducive to management, so we have a second loading method, using Jquery to load. Generally, we will use Jquery to load.

2. Jquery loading:

//不加属性
$(&#39;#box&#39;).draggable();
//JS部分
$(&#39;#box&#39;).draggable({
    revert : true,        //拖动后是否回到起始位置，boolean类型
    cursor : &#39;text&#39;,       //鼠标拖拽样式，十字，文本等
    handle : &#39;#pox&#39;,       //句柄，设置后只在设置后只能在当前元素下实现拖拽
    disabled : false,       //设置是否可以被拖拽
    edge : 50,          //设置边界往内多大距离可以实现拖拽
    axis : &#39;v&#39;,          //设置拖拽方向，v：垂直拖拽，h：水平拖拽
    proxy: &#39;clone&#39;,        //设置代理元素，使用clone时为复制当前元素
    deltaX : 10,         //被拖拽元素左上角距离当前光标的X轴方向的距离
    deltaY : 10,         //被拖拽元素左上角距离当前光标的Y轴方向的距离  
    proxy: function(source){    //自定义代理元素
    var p = $(&#39;<div style="border:1px solid
    #ccc;width:400px;height:200px;"></div>&#39;);
    p.html($(source).html()).appendTo(&#39;body&#39;);
    return p;
    },
});
//HTML部分
<div id="box" style="width:400px;height:200px;background:red;">
    内容部分
</div>

2. Events (the second is events)

1.onBeforeDrag Occurs before dragging

$(&#39;#box&#39;).draggable({
    onBeforeDrag : function (e) {
        alert(&#39;拖动之前触发！&#39;);
        //return false;
    }
});

Occurs before dragging, which occurs when the mouse clicks on the element. When false is returned, dragging will not be possible. , we will not let it return false directly, because it does not make any sense, and there should be sufficient logical judgment when using it.

2.onStartDrag occurs when dragging starts

$(&#39;#box&#39;).draggable({
    onStartDrag : function (e) {
        alert(&#39;拖动开始时触发！&#39;);
        //return false;
    }
});

It is executed at the moment of dragging after mouse click, and the execution time is after onBeforeDrag.

3. onDrag is executed during the dragging process.

$(&#39;#box&#39;).draggable({
    onDrag : function (e) {
        alert(&#39;拖动过程中触发！&#39;);
    }
});
在拖

is executed during the dragging process. It will be executed when the mouse moves, and returns false when dragging cannot be performed.

4.onStopDrag Occurs after dragging stops

$(&#39;#box&#39;).draggable({
    onStopDrag : function (e) {
        alert(&#39;在拖动停止时触发！&#39;);
    }
});

Triggers after dragging ends, that is, it is executed when the mouse is released, and there is no return value.

5. The above events can be used in combination, and the execution order is onBeforeDrag --> onBeforeDrag --> onDrag --> onStopDrag

$(&#39;#box&#39;).draggable({
    onBeforeDrag : function (e) {
         alert(&#39;拖动之前触发！&#39;);
        //return false;
    },
    onStartDrag : function (e) {
       alert(&#39;拖动时触发！&#39;);
    },
    onDrag : function (e) {
        alert(&#39;拖动过程中触发！&#39;);
    },
    onStopDrag : function (e) {
        alert(&#39;在拖动停止时触发！&#39;);
},});

Three, method (the third is method)

Method name: Description

##option: Return attribute object
proxy: If the proxy attribute is set, return the drag proxy element
enabl: Allow dragging

//返回属性对象
console.log($(&#39;#box&#39;).draggable(&#39;options&#39;));
//返回代理元素
onStartDrag : function (e) {
console.log($(&#39;#box&#39;).draggable(&#39;proxy&#39;));
},
//禁止拖动
$(&#39;#box&#39;).draggable(&#39;disable&#39;);
//允许拖放
$(&#39;#box&#39;).draggable(&#39;enable&#39;);

4. Set default attributes (this is the last setting)After one setting All drags and drops on the current page will share this attribute, so there is no need to set it again.

$(function(){
    $.fn.draggable.defaults.cursor = &#39;text&#39;;
});

The above is the entire content of this article about page dragging with the draggable attribute (if you want to learn more, come to the PHP Chinese website). If you have any questions, you can ask below.

【Editor's Recommendation】

How to remove the label from the ol tag in html? Summary of how to use the

The above is the detailed content of How does the html5draggable attribute achieve the page dragging effect? The method is summarized here!. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn