html5draggable 속성은 어떻게 페이지 끌기 효과를 얻나요? 방법은 여기에 요약되어 있습니다!

이 글은 주로 페이지 끌기 효과를 얻기 위해 draggable 속성을 사용하는 기술에 대해 설명합니다. 계속 읽어보면 실제로 이것이 어렵지 않다는 것을 알게 될 것입니다.

이 글을 함께 읽어보세요. 페이지 요소의 드래그 효과를 얻기 위해 Draggable(드래그)을 도입하는 것이므로 단계별로 살펴보겠습니다.

1. 로딩 방법(먼저 로딩 방법)

1.css 스타일 로딩:

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

CSS 스타일을 사용하여 Draggable을 로딩하는 것은 편리하고 빠르지만, 관리에 도움이 되지 않기 때문에 두 번째 클래스 Loading 메서드가 있는데 Jquery 메서드를 사용하여 로드합니다. 일반적으로 Jquery 메서드를 사용하여 로드합니다.

2. Jquery 모드 로딩:

//不加属性
$('#box').draggable();
//JS部分
$('#box').draggable({
    revert : true,        //拖动后是否回到起始位置，boolean类型
    cursor : 'text',       //鼠标拖拽样式，十字，文本等
    handle : '#pox',       //句柄，设置后只在设置后只能在当前元素下实现拖拽
    disabled : false,       //设置是否可以被拖拽
    edge : 50,          //设置边界往内多大距离可以实现拖拽
    axis : 'v',          //设置拖拽方向，v：垂直拖拽，h：水平拖拽
    proxy: 'clone',        //设置代理元素，使用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. 이벤트(두 번째는 이벤트)

1. onBeforeDrag는 드래그하기 전에 발생합니다.

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

는 드래그하기 전에 발생합니다. 는 요소를 마우스로 클릭하면 드래그가 불가능하며, 사용할 때 충분한 논리적 판단이 있어야 하기 때문에 직접적으로 false를 반환하도록 하지 않습니다.

2.onStartDrag는 드래그 시작 시 발생합니다

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

마우스 클릭 후 드래그하는 순간 실행되며, 실행 시간은 onBeforeDrag 이후입니다.

3.onDrag는 드래그 중에 실행됩니다

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

마우스가 움직일 때 실행되고, 드래그를 수행할 수 없으면 false를 반환합니다.

4.onStopDrag는 드래그가 중지된 후 발생합니다.

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

는 드래그 후 실행됩니다. 즉, 마우스를 놓을 때 실행되며 반환 값이 없습니다.

5. 위의 이벤트를 조합하여 사용할 수 있으며, 실행 순서는 onBeforeDrag --> onDrag --> onStopDrag

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

세 번째는 메소드입니다. )

메소드 이름: 설명

• 옵션: 속성 객체를 반환합니다.

• proxy: 프록시 속성이 설정된 경우 드래그 프록시 요소를 반환

• enabl: 드래그 허용

• 비활성화: 드래그 비활성화

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

4. 기본 속성을 설정합니다(이것이 마지막 설정입니다)

한 번 설정하면 현재 페이지의 모든 드래그 앤 드롭이 이 속성을 공유하므로 따로 설정할 필요가 없습니다. 다시 설정하세요.

$(function(){
    $.fn.draggable.defaults.cursor = 'text';
});

위는 draggable 속성을 사용한 페이지 드래그에 관한 이 기사의 전체 내용입니다. (자세한 내용을 알고 싶다면 PHP 중국어 웹사이트를 방문하세요.) 궁금한 점이 있으면 아래에 문의하세요.

【에디터 추천】

HTML의 ol 태그에서 라벨을 제거하는 방법은 무엇인가요?

태그 사용 방법 요약


HTML의 ul 태그에서 점을 제거하는 방법은 무엇인가요? HTML 비순차 목록의 스타일 예제 분석


위 내용은 html5draggable 속성은 어떻게 페이지 끌기 효과를 얻나요? 방법은 여기에 요약되어 있습니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!