EasyUIシリーズ学習(4) - Droppable(配置)_html/css_WEB-ITnose-htmlチュートリアル-php.cn

EasyUIシリーズ学習(4) - Droppable(配置)_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:26:26

オリジナル

1308 人が閲覧しました

1. コンポーネントを作成する

1. タグを使用してドロップエリアを作成する

<div id="pox" class="easyui-droppable" style="width: 200px; height: 100px; left: 100px; background:cyan"></div>

ログイン後にコピー

2. JavaScript を使用してドロップエリアを作成する

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan"></div><script>    $(function () {        $("#pox").droppable();    })</script>

ログイン後にコピー

2. プロパティ

1.受け入れる: 配置領域に影響を与える要素

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div><div id="box1" style="width:100px;height:50px;left:100px;background:lightcoral">物品1</div><div id="box2" style="width:100px;height:50px;left:100px;background:darkseagreen">物品2</div><script>    $(function() {        $("#box1").draggable();        $("#box2").draggable();        $("#pox").droppable({            accept: "#box1,#box2",            onDragEnter: function(e, source) {                //source分别放入的物体，即box1对象，box2对象                alert($(source).html());            },        });    });</script>

ログイン後にコピー

2.disabled: true の場合、配置は禁止されます。つまり、配置は効果がありません

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div><div id="box1" style="width:100px;height:50px;left:100px;background:lightcoral">物品1</div><div id="box2" style="width:100px;height:50px;left:100px;background:darkseagreen">物品2</div><script>    $(function () {        $("#box1").draggable();        $("#box2").draggable();        $("#pox").droppable({            accept: "#box1,#box2",            disabled: true,            onDragEnter: function (e, source) {                //不会弹出任何东西                alert($(source).html());            },        });    });</script>

ログイン後にコピー

3. Events

1.onDragEnter:要素がドラッグされたときドラッグされた要素が配置領域にあるときにトリガーされます。ソースパラメーターは、ドラッグされた DOM 要素を表します。

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div><div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div><script>    $(function () {        $("#box").draggable();        $("#pox").droppable({            accept: "#box",            onDragEnter: function (e, source) {                $(this).css("background", "red");;            },        });    });</script>

ログイン後にコピー

2.onDragLeave: ドラッグされた要素が配置領域から出るときにトリガーされます。 DOM 要素

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div><div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div><script>    $(function () {        $("#box").draggable();        $("#pox").droppable({            accept: "#box",            onDragEnter: function (e, source) {                $(this).css("background", "red");;            },            onDragLeave: function (e, source) {                $(this).css("background", "yellow");            }        });    });</script>

ログイン後にコピー

3.onDrop: ドラッグされた要素がドロップ領域に配置されたときにトリガーされます。source パラメーターは、ドラッグされた DOM 要素を表します。

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div><div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div><script>    $(function () {        $("#box").draggable();        $("#pox").droppable({            accept: "#box",            onDragEnter: function (e, source) {                $(this).css("background", "red");;            },            onDragLeave: function (e, source) {                $(this).css("background", "yellow");            },            onDrop: function (e, source) {                $(this).css("background", "green");            }        });    });</script>

ログイン後にコピー

4.onDragOver: ドラッグされた要素がドロップ領域を通過したときにトリガーされます。 , ソースパラメータはドラッグされた DOM 要素を表します

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div><div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div><script>    $(function () {        $("#box").draggable();        $("#pox").droppable({            accept: "#box",            onDragEnter: function (e, source) {                $(this).css("background", "red");;            },            onDragLeave: function (e, source) {                $(this).css("background", "yellow");            },            onDrop: function (e, source) {                $(this).css("background", "green");            },            onDragOver: function (e, source) {                $(this).css("background", "orange");            }        });    });</script>

ログイン後にコピー

IV. メソッド

1.options: 属性オブジェクトを返す

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div><div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div><script>    $(function () {        $("#pox").droppable({            accept: "#box"        });        console.log($("#pox").droppable("options"));    });</script>

ログイン後にコピー

2.disable: 配置関数を無効にする

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div><div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div><script>    $(function () {        $("#box").draggable();        $("#pox").droppable({            accept: "#box",            onDragEnter: function (e, source) {                $(this).css("background", "red");;            },        });        //放置物品不会变色        $("#pox").droppable("disable");    });</script>

ログイン後にコピー

3.有効にする: 配置を有効にする関数

<div id="pox" style="width: 200px; height: 100px; left: 100px; background:cyan">放置区</div><div id="box" style="width:100px;height:50px;left:100px;background:lightcoral">物品</div><script>    $(function () {        $("#box").draggable();        $("#pox").droppable({            accept: "#box",            onDragEnter: function (e, source) {                $(this).css("background", "red");;            },        });        $("#pox").droppable("disable");        //放置区会变色        $("#pox").droppable("enable");    });</script>

ログイン後にコピー

5. デフォルトオブジェクト

1 をオーバーライドします。