EasyUI series Learning (4)-Droppable (placement), easyui-droppable

EasyUI series Learning (4)-Droppable (placement), easyui-droppable

I. Create Components

1. Use tags to create a placement area

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

2. Create a placement area using JavaScript

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

Ii. Attributes

1. accept: elements that affect placement

<Div id = "pox" style = "width: 200px; height: 100px; left: 100px; background: cyan "> placement </div> <div id =" box1 "style =" width: 100px; height: 50px; left: 100px; background: lightcoral "> Item 1 </div> <div id =" box2 "style =" width: 100px; height: 50px; left: 100px; background: darkseagreen "> Item 2 </div> <script> $ (function () {$ (" # box1 "). draggable (); $ ("# box2 "). draggable (); $ ("# pox "). droppable ({accept: "# box1, # box2", onDragEnter: function (e, source) {// The objects put in the source respectively, that is, the box1 object, box2 object alert(((source).html () ;},}) ;}); </script>

2. disabled: if it is true, placement is prohibited, that is, placement has no effect.

<Div id = "pox" style = "width: 200px; height: 100px; left: 100px; background: cyan "> placement </div> <div id =" box1 "style =" width: 100px; height: 50px; left: 100px; background: lightcoral "> Item 1 </div> <div id =" box2 "style =" width: 100px; height: 50px; left: 100px; background: darkseagreen "> Item 2 </div> <script> $ (function () {$ (" # box1 "). draggable (); $ ("# box2 "). draggable (); $ ("# pox "). droppable ({accept: "# box1, # box2", disabled: true, onDragEnter: function (e, source) {// nothing will pop up. alert($(source).html () ;},}) ;}</script>

Iii. Events

1. onDragEnter: triggered when the dragged element is in the placement area. The source parameter indicates the dragged DOM element.

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

2. onDragLeave: triggered when the dragged element leaves the placement area. The source parameter indicates the dragged DOM element.

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

3. onDrop: triggered when the dragged element is placed in the placement area. The source parameter indicates the dragged DOM element.

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

4. onDragOver: triggered when the dragged element passes through the placement area. The source parameter indicates the dragged DOM element.

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

Iv. Methods

1. options: property object returned

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

2. disable: disable the placement function.

<Div id = "pox" style = "width: 200px; height: 100px; left: 100px; background: cyan "> placement </div> <div id =" box "style =" width: 100px; height: 50px; left: 100px; background: lightcoral "> item </div> <script >$ (function () {$ (" # box "). draggable (); $ ("# pox "). droppable ({accept: "# box", onDragEnter: function (e, source) {keys (thisground .css ("background", "red ");;},}); // items are not discolored. $ ("# pox "). droppable ("disable") ;}); </script>

3. enable: enable the placement function.

<Div id = "pox" style = "width: 200px; height: 100px; left: 100px; background: cyan "> placement </div> <div id =" box "style =" width: 100px; height: 50px; left: 100px; background: lightcoral "> item </div> <script >$ (function () {$ (" # box "). draggable (); $ ("# pox "). droppable ({accept: "# box", onDragEnter: function (e, source) {keys (thisground .css ("background", "red ");;},}); $ ("# pox "). droppable ("disable"); // The placement area will change color $ ("# pox "). droppable ("enable") ;}); </script>

5. Override the default object

1. Use $. fn. droppable. defaults to override the default object

<Div id = "pox" style = "width: 200px; height: 100px; left: 100px; background: cyan "> placement </div> <div id =" box "style =" width: 100px; height: 50px; left: 100px; background: lightcoral "> item </div> <script >$ (function. droppable. defaults. disabled = true; $ ("# box "). draggable (); $ ("# pox "). droppable ({accept: "# box", onDragEnter: function (e, source) {response (this).css ("background", "red ");;},});}); </script>