Easyui Droppable Components implement placement effects _jquery

Placing is to put an object into an object, of course, it is necessary for Easyui to trigger a variety of effects, and this component will not depend on other components.

Loading mode of droppable

1,class loading has been less like class way of loading waste a position, the code a lot still look at the mess.

Copy Code code as follows:

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

2,JS Load Call

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

Properties of Droppable

1,accept defaults to NULL to determine which elements are accepted, that is, that element can be placed

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

2,deisabled default is False if true, prohibit placement

$ ("#box"). Droppable ({
  accept: ' #pox ',     ///place element pox in element box
  disabled:true,/    /forbidden to place
});

Droppable Events List

The 1,ondragenter is triggered when the element is dragged into the drop area.

The 2,ondragover is triggered when the element is dragged through the drop area.

3,ondragleave is triggered when the dragged element leaves the placement area

4,ondrop triggers when the dragged element is put into the drop area

 Ondragenter/ondragover/ondragleave/ondrop:function (e,source) {
   //source parameter get DOM element
 }

Droppable Method List

1,options Return Property Object

Console.log (' #box '). droppable (' options ');

The function of 2,enable,disable and the above property is the same as enabling and prohibiting placement

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

Let's show you the official example.

<! DOCTYPE html>  

The running effect chart is not given here, the official website can be viewed directly. over!

Effect Address: http://www.jeasyui.com/demo/main/index.php?plugin=Droppable&theme=default&dir=ltr&pitem=

Easyui 1.3.5 droppable the end of this.