JQuery easyui (2) Droppable (placement) component, jqueryeasyui

JQuery easyui (2) Droppable (placement) component, jqueryeasyui

The so-called placement means to put an object into an object. Of course, it is essential for easyui to trigger various effects, and this component will not depend on other components.

Droppable Loading Method

1. class loading has never liked class loading to waste a single place, and the code is still messy.

1 <div id='dd' class="easyui-droppable" data-options="accept:'#box,#pox'"></div>

2. js load call

$ ("# Box"). droppable ({accept: '# pox', // place the element pox in the element box });

 

Droppable attributes

1. The default accept value is null to determine which elements are accepted, that is, the elements can be placed.

$ ("# Box"). droppable ({accept: '# pox', // place the element pox in the element box });

2. deisabled is false by default. If it is true, placement is prohibited.

$ ("# Box"). droppable ({accept: '# pox', // place the element pox in the element box. disabled: true, // disable placement });

 

Droppable event list

1. onDragEnter is triggered when the dragged element is in the placed area.

2. onDragOver is triggered when the dragged element passes through the placed area.

3. onDragLeave is triggered when the dragged element leaves the placement area.

4. onDrop is triggered when the dragged element is placed in the placement area.

1 onDragEnter/onDragOver/onDragLeave/onDrop: function (e, source) {2 // The source Parameter retrieves DOM element 3}

 

Droppable method list

1. options returns the property object.

console.log($('#box').droppable('options'));

2. enable, disable and the above attributes have the same functions: enable and disable placement.

$('#box').droppable('enable/disable')

 

Easyui 1.3.5 Droppable is complete.

When reading PDF, I felt that something was particularly wrong. It turned out to be a PDF typo --