Easy UI entry

Easy UI commonly used in enterprise-class development of UI and backend development UI, heavy.

1.Draggable (drag) component does not rely on other components

1.1 loading

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="JS/Demo.JS"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <div id="box" style="width :400px;height: 200px;background:orange;" >
        内容部分
    </div>
</body>
</html>

div box

$(function(){

 $('#box').draggable();

});

1.2 property list

$ (function () { 
 $ ( ' #box ' ) .draggable ({ 
  Revert: to true , // set to true, then the drag starting position stop 
  Cursor: ' Move ' , // drag the pointer CSS style move the pointer to move the text style to a text style 
  Disabled: to true , // to false can not drag 
  Edge: 50 , // drag container width 
  Axis: ' V ' , // V vertical drag, h horizontal drag 
  Proxy: ' clone ' , // clone instead of a drag element 
  Proxy: function (Source) { // invisible drag element
   var p=$('<div style="width:400px;height:200px;border:5px;dashed:#ccc">')
   p.appendTo('body')
   return p;
  }
    });
});

Property list

1.3 Event List

$ (function () { 
 $ ( ' #box ' ) .draggable ({ 
   onBeforeDrag: function (E) 
   { 
   Alert ( " drag pre-trigger! " ); 
   } 
   onStartDrag: function (E) 
   { 
   Alert ( " drag start trigger ! " ); 
   } 
    onDrag: function (E) 
   { 
   Alert ( " dragging trigger! " ); 
   } 
   onStopDrag: function (E) 
   { 
   Alert ( " dragging trigger! " ); 
   } 
    }); 
});

Event List

1.4 Method list

$ ( ' #Box ' ) .draggable ( ' disable ' ); 
$ ( ' #box ' ) .draggable ( ' enable ' ); 
$ ( ' #box ' ) .draggable ( ' Options ' ); 
$ ( ' #box ' ) .draggable ( ' Proxy ' ); // run the event can be seen in drag

Method List

2.Droppable (component placement)

$ (function () { 
$ ( ' #dd ' ) .droppable ({ // placed components 
Accept: ' #box ' , // acceptable components
 // Disabled: to true, // drag is generally not valid write 
onDragEnter : function (E, Source) 
{ 
$ ( the this ) .css ( ' background ' , ' Blue ' ); 
}, 
the onDragOver: function (E, Source) // will stop only trigger a trigger Enter 
{ 
$ ( the this ) .css ( ' background ' , ' Orange '); 
}, 
The onDrop: function (E, Source) // put into a location area, release the mouse button, the operation of leaving 
{ 
$ ( the this ) .css ( ' background ' , ' White ' ); 
}, 

} ); 
$ ( ' #box ' ) .draggable ({}); 
});

Droppable

3.Resizable (resizing) component

Guess you like