html5draggable 属性はどのようにしてページのドラッグ効果を実現しますか?その方法をまとめました！-H5 チュートリアル-php.cn

html5draggable 属性はどのようにしてページのドラッグ効果を実現しますか?その方法をまとめました！

寻∝梦

リリース： 2018-08-31 16:45:11

オリジナル

4013 人が閲覧しました

この記事では主に、draggable 属性を使用してページのドラッグの効果を実現する技術について説明します。読み進めていただくと、これが実際には難しいことではないことがわかります。この記事を一緒に読みましょう。ページ要素のドラッグ効果を実現するために Draggable (ドラッグ) を導入することなので、段階的に実行してみましょう。

1. 読み込み方法（最初は読み込み方法です）

1.cssスタイルの読み込み:

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

ログイン後にコピー

CSSスタイルを使用して読み込みます Draggableは便利で速いですが、管理には不向きですので、 2 番目のクラスの Loading メソッドがあり、Jquery メソッドを使用してロードします。通常、Jquery メソッドを使用してロードします。

2. Jquery モードの読み込み:

//不加属性
$(&#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. イベント (2 番目はイベント)

1. onBeforeDrag はドラッグ前に発生します。両方の場合に発生します。のfalse が返された場合、マウスで要素をドラッグすることはできません。これを使用する場合は、十分な論理的判断が必要です。

2.onStartDragはドラッグ開始時に発生します

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

ログイン後にコピー

マウスクリック後ドラッグした瞬間に実行され、実行時間はonBeforeDrag以降になります。

3.onDragはドラッグ中に実行されます

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

ログイン後にコピー

マウスが移動すると実行され、ドラッグできない場合はfalseを返します

4.onStopDragはドラッグ停止後に発生します

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

ログイン後にコピー

はドラッグ後にトリガーされます完了します。つまり、マウスが放されたときに実行され、戻り値はありません。

5. 上記のイベントは組み合わせて使用でき、実行順序は onBeforeDrag --> onBeforeDrag --> onStopDrag

rree

のメソッドです。 )

メソッド名: 説明

オプション: 属性オブジェクトを返します

proxy: プロキシ属性が設定されている場合はドラッグプロキシ要素を返します
enable: ドラッグを許可します
disable:ドラッグを無効にします

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

ログイン後にコピー

4. デフォルトの属性を設定します (これが最後の設定です)

一度設定すると、現在のページ上のすべてのドラッグアンドドロップがこの属性を共有するため、設定する必要はありません。再度設定してください。

$(&#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;);
},});

ログイン後にコピー

上記は、draggable 属性を使用したページのドラッグに関するこの記事の全内容です (さらに詳しく知りたい場合は、PHP の中国語 Web サイトにアクセスしてください)。ご質問がある場合は、以下を参照してください。

【編集者のおすすめ】

HTMLのolタグからラベルを削除するにはどうすればよいですか？

HTMLのulタグからドットを削除するには？ HTMLの順序なしリストのスタイル分析例

以上がhtml5draggable 属性はどのようにしてページのドラッグ効果を実現しますか?その方法をまとめました！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。